/* GLOBAL */
html,
body {
  background-color: $ice-body-bg;
  -webkit-font-smoothing: antialiased;
}

.ice-design-header-aside-footer-responsive-layout-#{$theme} {
  .logo {
    max-width: 340px;
    height: 42px;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo-text {
      display: block;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 10px;
      font-size: 28px;
      color: #3080fe;
      background-color: white;
      font-weight: bold;
      font-family: Helvetica, sans-serif;
    }
  }

  /* LAYOUT */
  &.ice-design-layout {
    width: 100%;
    background-color: $ice-layout-bg;
    background-size: 100%;
    background-repeat: no-repeat;

    .menu-btn {
      position: fixed;
      left: 0;
      top: 82px;
      width: 40px;
      height: 40px;
      border-radius: 0 6px 6px 0;
      margin-bottom: 0;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      color: $ice-toggle-btn-text-color;
      background: $ice-toggle-btn-bg;
      z-index: 9;
      text-decoration: none;
      &:hover {
        color: #e7e7e7;
      }
    }

    /* HEADER */
    .ice-design-layout-header {
      width: 100%;
      min-width: 430px;
      padding: 10px 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      background: #fff;

      .user-avatar {
        margin-right: 12px;
        border-radius: 4px;
      }
      .ice-design-layout-header-menu .ice-menu {
        background: $ice-header-menu-bg;
        color: $ice-header-text-color;
        .ice-menu-item:hover,
        .ice-menu-item > a:hover {
          color: $ice-header-text-hover-color;
        }
      }
      .ice-design-header-userpannel {
        margin-left: 20px;
        cursor: pointer;
        .user-profile {
          display: inline-block;
          text-align: center;
          margin-bottom: 2px;
          color: $ice-header-text-color;
        }
        .icon-down {
          margin-left: 2px;
          color: $ice-icon-down-color;
        }
      }
    }

    /* ASIDE */
    .ice-design-layout-aside {
      background: $ice-aside-bg;
      position: relative;
      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
      z-index: 3;

      .collapse-btn {
        cursor: pointer;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        color: $ice-collapse-btn-color;
      }

      .ice-menu {
        background: $ice-aside-menu-bg;
        transition: all 0.3s ease;
        &.ice-menu-inline .ice-icon-stable::before {
          font-weight: normal;
        }
      }

      .ice-menu.ice-menu-root {
        padding: 16px 0;
      }

      .ice-menu-inline.ice-menu-sub {
        background: #000c17;
      }

      .ice-menu.ice-menu-root.ice-menu-inline
        > .ice-menu-submenu
        > .ice-menu-submenu-title,
      .ice-menu.ice-menu-root.ice-menu-inline > .ice-menu-item {
        margin-bottom: 1px;
        color: $ice-aside-text-color;
        font-weight: 400;
        font-size: 14px;
      }

      .ice-menu.ice-menu-root .ice-menu-inline > .ice-menu-item {
        margin-bottom: 1px;
        color: $ice-aside-sub-text-color;
      }

      .ice-menu .ice-menu-item:hover,
      .ice-menu.ice-menu-horizontal > .ice-menu-item:hover,
      .ice-menu.ice-menu-root > .ice-menu-item:hover {
        color: #fff;
        background-image: linear-gradient(
          90deg,
          $ice-aside-menu-item-selected-gradient-left-bg 0%,
          $ice-aside-menu-item-selected-gradient-right-bg 100%
        );
      }

      .ice-menu .ice-menu-item > a:hover,
      .ice-menu.ice-menu-horizontal > .ice-menu-item:hover,
      .ice-menu.ice-menu-root > .ice-menu-item > a:hover {
        color: $ice-aside-text-hover-color;
      }

      .ice-menu:not(.ice-menu-horizontal) .ice-menu-item-selected {
        border-radius: 0px;
        background-image: linear-gradient(
          90deg,
          $ice-aside-menu-item-selected-gradient-left-bg 0%,
          $ice-aside-menu-item-selected-gradient-right-bg 100%
        );
      }

      .ice-menu .ice-menu-submenu-vertical > .ice-menu:after {
        background: $ice-aside-menu-submenu-vertical-bg;
      }

      .ice-menu:not(.ice-menu-horizontal) .ice-menu-item-selected:before,
      .ice-menu-sub .ice-menu-item:hover:before {
        width: 0;
      }

      .ice-menu-item-selected > a {
        color: $ice-aside-menu-item-selected-text-color;
      }

      .ice-menu-item:hover {
        background: $ice-aside-menu-submenu-item-hover-bg;
        color: $ice-aside-text-hover-color;
      }

      /* ASIDE COLLAPSED */
      .ice-menu.ice-menu-collapse {
        color: $ice-aside-collapse-menu-text-color;
        > .ice-menu-item {
          text-align: center;
        }
        .ice-menu-submenu {
          &:hover {
            transition: initial;
            color: $ice-aside-menu-item-selected-text-color;
            background-image: linear-gradient(
              90deg,
              $ice-aside-menu-item-selected-gradient-left-bg 0%,
              $ice-aside-menu-item-selected-gradient-right-bg 100%
            );
          }
        }
        .ice-menu-sub {
          background: #fff;
        }
        .ice-menu .ice-menu-item > a:hover {
          color: $ice-aside-menu-collapse-selected-text-color;
        }
        .ice-menu-item-selected {
          color: $ice-aside-menu-item-selected-text-color;
          text-align: left;
        }
        .ice-menu .ice-menu-item:hover,
        .ice-menu.ice-menu-horizontal > .ice-menu-item:hover,
        .ice-menu.ice-menu-root > .ice-menu-item:hover {
          color: $ice-aside-menu-collapse-selected-text-color;
          background: transparent;
        }
      }

      .ice-menu.ice-menu-collapse .ice-menu-submenu-title {
        text-align: center;
      }
      .ice-menu.ice-menu-vertical .ice-icon-stable {
        margin-right: 0;
      }

      .ice-menu.ice-menu-collapse
        .ice-menu-submenu.ice-menu-submenu-active
        > .ice-menu-submenu-title {
        background: transparent;
        color: #fff;
        &:hover:before {
          width: 0;
        }
      }

      .ice-menu.ice-menu-collapse
        > .ice-menu-submenu-active
        > .ice-menu-submenu-title:before,
      .ice-menu.ice-menu-collapse
        > .ice-menu-submenu-selected
        > .ice-menu-submenu-title:before,
      .ice-menu.ice-menu-collapse .ice-menu-item:hover:before {
        width: 0;
      }

      .ice-menu.ice-menu-collapse
        .ice-menu:not(.ice-menu-horizontal)
        .ice-menu-item-selected {
        background: $ice-aside-menu-collapse-bg;
        a {
          color: $ice-aside-menu-collapse-selected-text-color;
        }
      }

      .ice-menu.ice-menu-collapse
        > .ice-menu-submenu-selected
        > .ice-menu-submenu-title {
        background-image: linear-gradient(
          90deg,
          $ice-aside-menu-item-selected-gradient-left-bg 0%,
          $ice-aside-menu-item-selected-gradient-right-bg 100%
        );
        color: $ice-aside-menu-item-selected-text-color;
        &:before {
          width: 0;
        }
      }
    }

    /* MAIN */
    .ice-layout-main {
      min-width: 430px;
      padding: 0 0 0 20px;
      overflow: hidden;
    }
  }

  /* FOOTER */
  .ice-design-layout-footer {
    width: 100%;
    .ice-design-layout-footer-body {
      padding: 0 20px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo .logo-text {
        color: #3080fe;
      }
      .copyright {
        color: $ice-copyright-text-color;
        line-height: 1.5;
        font-size: 12px;
        text-align: left;
      }
      .copyright-link {
        color: $ice-copyright-text-color;
        &:hover {
          color: $ice-copyright-text-hover-color;
          text-decoration: none;
        }
      }
    }
  }
}

.user-profile-menu {
  width: 130px;
  border-radius: 6px;
  padding: 0 16px;
  .user-profile-menu-item {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    a:hover {
      color: $ice-header-text-hover-color;
    }
    i {
      margin-right: 5px;
    }
  }
}

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

@media screen and (max-width: 721px) and (min-width: 1199px) {
}

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