@use "../mixins";
@use "../variables";

.fwe-side-menu {
  flex-shrink: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  .fwe-side-menu-item {
    border-left: 1px solid variables.$border;
    line-height: 1.2;
    display: flex;
    align-items: center;
    height: 42px;
    cursor: pointer;
    margin-left: -1px;
    color: variables.$text;
    padding: 0px 8px 0px 16px;
    position: relative;
    &::before {
      position: absolute;
      content: "";
      top: 0px;
      left: -1px;
      bottom: 0px;
      width: 0px;
      background: variables.$hero;
      transition: width 0.2s, height 0.2s;
    }
    &.fwe-active {
      color: variables.$hero;
      &::before {
        width: 4px;
      }
    }
  }

  @media (max-width: 900px) {
    width: 190px;
  }

  &--horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    @include mixins.custom-scrollbar;

    .fwe-side-menu-item {
      border: unset;
      height: 48px;
      padding: 0px 16px;
      margin: 0px;
      white-space: nowrap;
      &::before {
        top: unset;
        right: 16px;
        left: 16px;
        width: unset;
        height: 0px;
      }
      &.fwe-active {
        &::before {
          width: unset;
          height: 4px;
        }
      }
    }
  }
}