@import '~scss/variables';
@import '~scss/mixins';

$trans-speed: 0.2s;

.subNav {
  & > p {
    color: #79879c;
    margin-bottom: 12px;
  }

  & > ul {
    margin-bottom: 20px;

    & > li {
      border-radius: 18px;
      border: solid 1px transparent;
      transition: all $trans-speed ease-in-out;

      & > a,
      .title {
        display: block;
        padding: 7px 12px;
        color: #4a5974;
        font-weight: 500;
        cursor: pointer;

        @media (max-width: 1366px) {
          padding: 7px 0;
        }

        :global {
          .icon {
            margin-right: 8px;
            vertical-align: text-bottom;
          }

          .kubed-icon-chevron-down {
            margin-top: 4px;
            transition: all $trans-speed ease-in-out;
          }
        }
      }

      &.select,
      &.open {
        & > a {
          color: $primary;

          :global .kubed-icon {
            color: #00aa72;
            fill: #90e0c5;
          }
        }

        .title {
          :global .kubed-icon-chevron-down {
            transform: rotate(-180deg);
          }
        }

        .innerNav > li {
          height: 20px;
          margin-top: 8px;
          opacity: 1;
          transition: height $trans-speed ease-in-out,
            margin-top $trans-speed ease-in-out,
            opacity $trans-speed ease-in-out 0.1s;
        }
      }

      &.childSelect .title {
        color: $primary;
        :global .kubed-icon {
          color: #00aa72;
          fill: #90e0c5;
        }
      }

      &.disabled {
        opacity: 0.7;

        &.select {
          & > a {
            color: #4a5974;
            cursor: not-allowed;
          }

          :global .kubed-icon {
            color: #324558;
            fill: #b6c2cd;
          }
        }

        .title {
          :global .kubed-icon-chevron-down {
            transform: none;
          }
        }

        .innerNav > li {
          height: 0;
          opacity: 0;
          margin: 0;
          overflow: hidden;
        }
      }

      & + li {
        margin-top: 4px;
      }
    }
  }
}

.innerNav {
  margin-bottom: 4px;
  padding-left: 38px;

  @media (max-width: 1366px) {
    padding-left: 26px;
  }

  & > li {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height $trans-speed ease-in-out 0.1s,
      margin-top $trans-speed ease-in-out 0.1s, opacity $trans-speed ease-in-out;

    & > a {
      display: block;
      color: #4a5974;
    }

    &.select,
    &:hover,
    &:active {
      & > a {
        color: $primary;
      }
    }

    &.disabled {
      opacity: 0.7 !important;

      &.select,
      &:hover,
      &:active {
        & > a {
          color: #4a5974;
          cursor: not-allowed;
        }
      }
    }
  }
}

.back {
  margin: 20px 0;
  padding: 8px 12px;
  & > a > svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: text-top;
  }
}

.rightIcon {
  float: right;
  margin-right: 0 !important;
}

.tip {
  margin-top: -2px;
  margin-left: 4px;
}
