@import "_variables";

.scui-submenu {
  padding: 0;
  min-width: 280px;
  position: fixed;
  width: 412px;
  overflow: auto;
  height: 100%;

  .submenu-nav {
    padding: 0 0 16px 0;
  }

  .submenu-header {
    padding: 22px;
    height: 64px;
  }

  .submenu-divider {
    border-bottom: 1px solid $main_3;
  }

  .nav-header-label {
    font-weight: 400;
    font-size: 15px;
    height: 40px;
    padding: 12px 12px 0 24px;
  }

  .submenu-title {
    font-size: 20px;
    color: $blank_1;
    font-weight: 600;
  }

  .submenu-nav-title {
    font-weight: 500;
    font-size: 14px;
    color: $main_5;
    margin: 24px 0 8px 0;
    height: 40px;
    padding-left: 24px;
    padding-top: 14px;
    position: relative;
    .icon {
      text-decoration: none;
      position: absolute;
      right: 16px;
      font-size: 14px;
      color: $blank_1;
      visibility: hidden;
      &:hover {
        opacity: 1;
        color: $blank_1 !important;
      }
    }
    &:hover {
      background: $main_1;
      .icon {
        visibility: visible;
      }
    }
  }

  .submenu-nav-items {
    margin-top: 2px;
  }

  .submenu-nav-label {
    color: $blank_1 !important;
    text-overflow: ellipsis;
    word-break: break-word;
    font-weight: 300;
  }

  hr {
    margin: 0;
  }
}

.submenu-nav-item {
  margin-top: 2px;
  font-weight: 400;
  font-size: 15px;
  min-height: 40px;
  padding: 8px 12px 8px 24px;
  cursor: pointer;
  list-style: none;
  word-break: break-all;

  &.active {
    .list-item {
      a {
        color: $prim_4 !important;
      }
      .icon {
        color: $prim_4 !important;
      }
      .submenu-nav-actions {
        .icon {
          opacity: 0.6;
          color: $prim_4 !important;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }

  &:hover {
    background: $main_1;
    .submenu-nav-actions {
      visibility: visible;
    }
  }

  &.gu-transit {
    background: #f2f2f2 !important;
    opacity: 0.2;

    * {
      visibility: hidden;
    }
  }

  .icon2 {
    font-weight: 600;
    margin-left: 4px;
    color: $blank_1;
    font-size: 14px;
    padding: 2px;
    cursor: pointer;
  }

  .icon1 {
    color: $blank_1;
    font-weight: 600;
    font-size: 14px;
    margin-right: 8px;
  }

  .list-item {
    color: $main_7;
    display: flex;
    flex-direction: row;
    width: 100%;
    line-height: 18px;
    align-items: center;
    pointer-events: none;

    a {
      color: $main_7;
      text-decoration: none !important;
    }
  }
}

.submenu-nav-actions {
  margin-left: auto;
  visibility: hidden;
  display: flex;
  .icon {
    opacity: 0.6;
    &:hover {
      opacity: 1;
      color: $blank_1;
    }
  }

  .icon-btn-empty {
    color: $main_4;
  }

  .btn-edit {
    padding: 3px 5px;
    color: $blank_1;
    cursor: pointer;
    font-size: 14px;
    min-width: 38px;
    background: none;
    border: 0;
    pointer-events: all;

    &:hover {
      color: $prim_4;
    }
  }
}