@use 'core.scss';


* {
  margin: 0;
  padding: 0;
  outline: none;
}

.box-sizing {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: -apple-system, "PingFang SC", 'Microsoft YaHei', sans-serif;
  background-color: var(--main-bg-color);
}

.dashboard-layout {
  background-color: var(--main-bg-color);
}

.navigation-container {
  //width: var(--navigation-width);
  background-color: #fff;
  //box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .nav-item {
    padding: 0px 20px;
    color: rgb(90, 90, 90);
    font-size: 20px;

    &.active {
      color: rgb(19, 19, 19);
      font-weight: bold;
    }
  }
}

.app-header {
  @apply w-full navigation-container flex justify-between items-center p-basic fixed top-0 inset-x-0 bg-white/90;
  z-index: var(--header-z-index);
  height: var(--app-header-header);
}

.app-content {
  padding-top: var(--app-header-header);
}

.logo-container {
  svg {
    max-height: 100%;
    display: block;
    width: auto;
  }
}

.container {
  max-width: 95%;
  width: var(--container-width, 1800px);
  margin: 0 auto;
}

.article-action-icon {
  @apply cursor-pointer text-gray-500 hover:text-blue-500 block;
}
.news-detail-modal{
  .ant-modal-content{
    padding-right: 0;
    padding-left: 0;
  }
  .news-detail{
    video{
      width: 100%;
      max-width: 100%;
      max-height: 400px;
    }
  }
}
.userinfo-drop-menu{
  @apply drop-shadow bg-gray-50 pb-2 rounded px-4;
  .user-profile{
    @apply py-3;
    .info{
      min-width: 100px;
    }
    .user-avatar{
      width: 36px;
      height: 36px;
    }
  }
  .menu-list-container{
    .ant-dropdown-menu{
      @apply shadow-none bg-transparent p-0 rounded-none;
      .ant-dropdown-menu-item{
        @apply hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded-none text-base py-2;
      }
      .nav-item{
        @apply flex items-center;
        .svg-icon{
          transform: translateY(1px);
        }
        .nav-text{
          @apply ml-2;
        }
      }
    }
  }
  .logout{
    @apply text-center py-2 hover:bg-gray-200 text-gray-600 hover:text-gray-800 cursor-pointer;
  }
}
.news-detail-content-container{
  margin-right: -30px;
  padding-right: 30px;
}

img {
  max-width: 100%;
}

@media screen and (max-width: 2000px) {
  :root {
    line-height: 1.2;
  }
  .logo-container {
    height: 36px;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --navigation-width: 200px;
  }
  .container {
    max-width: 98%;
    padding: 20px 0;

  }
}

@media screen and (max-width: 800px) {
}