@use "mixins";
@use "variables";

.fwe-tree {
  a,
  a:hover {
    text-decoration: none;
  }

  position: relative;
  @include mixins.custom-scrollbar;

  &-node {
    position: relative;
    display: flex;
    flex-basis: 100%;
    min-width: 0;
    height: variables.$spacer * 2.5;

    .fwe-btn--tree-node-toggle {
      .fwe-icon,
      .fwe-svg-icon {
        margin-right: 0px !important;
      }
    }

    &-indicator {
      position: absolute;
      left: 0;
      width: 100%;
      height: variables.$spacer * 2.5;

      &::before {
        position: absolute;
        content: "";
        width: 1px;
        height: variables.$spacer * 2.5;
        left: 0;
        background-color: variables.$caerul;
        transform-origin: left top;
        transform: scaleX(0);
        transition: none;
      }
    }

    &-container {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;

      &--selected {
        > .fwe-tree-node-indicator {
          background-color: variables.$background;

          &::before {
            transform: scaleX(4);
            transition: transform 0.2s;
          }
        }

        > .fwe-tree-node {
          .fwe-btn--tree-node-toggle {
            .fwe-icon,
            .fwe-svg-icon {
              color: variables.$caerul;
            }
          }

          .fwe-btn--tree-node-select {
            .fwe-icon,
            .fwe-svg-icon {
              color: variables.$caerul;
            }
          }

          .fwe-tree-node-text {
            color: variables.$caerul;
            font-weight: variables.$font-weight-bold;
          }
        }
      }

      &--disabled {
        pointer-events: none;
        > .fwe-tree-node {
          .fwe-tree-node-alert {
            .fwe-icon,
            .fwe-svg-icon {
              color: variables.$text-disabled !important;
            }
          }
        }
      }

      $levels: 20;
      @for $i from 1 through $levels {
        &[aria-level="#{$i}"] {
          padding-left: variables.$spacer * ($i - 1);
        }
      }

      &[aria-expanded="false"] {
        > .fwe-tree-node {
          .fwe-icon-arrows-right-2 {
            &::before {
              transform: rotate(0deg);
              transition: transform 0.2s;
            }
          }
        }
      }

      &[aria-expanded="true"] {
        > .fwe-tree-node {
          .fwe-tree-node-text {
            font-weight: variables.$font-weight-bold;
          }

          .fwe-icon-arrows-right-2 {
            &::before {
              transform: rotate(90deg);
              transition: transform 0.2s;
            }
          }
        }
      }

      &:not([aria-expanded]) {
        > .fwe-tree-node {
          margin-left: variables.$spacer * 2.5;
        }
      }
    }

    &-text {
      font-size: variables.$font-size-md;
      height: variables.$spacer-l;
      line-height: variables.$spacer-l;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 variables.$spacer-s 0 variables.$spacer-xxs;
    }

    &-alert {
      width: variables.$spacer * 2.5;
      max-width: variables.$spacer * 2.5;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &:hover {
      .fwe-tree-node-text {
        color: variables.$hero-hover;
      }

      .fwe-btn--tree-node-select {
        .fwe-icon,
        .fwe-svg-icon {
          color: variables.$hero-hover;
        }
      }

      .fwe-btn--tree-node-toggle {
        .fwe-icon,
        .fwe-svg-icon {
          color: variables.$hero-hover;
        }
      }
    }

    &:active {
      .fwe-tree-node-text {
        color: variables.$hero-active;
      }

      .fwe-btn--tree-node-select {
        .fwe-icon,
        .fwe-svg-icon {
          color: variables.$hero-active;
        }
      }

      .fwe-btn--tree-node-toggle {
        .fwe-icon,
        .fwe-svg-icon {
          color: variables.$hero-active;
        }
      }
    }
  }

  &--nested {
    .fwe-tree-node-container {
      display: block;
      position: static;
      min-width: 0;
      width: inherit;

      .fwe-tree-node-container {
        margin-left: variables.$spacer;
      }
    }
  }
}

.fwe-btn.fwe-btn-link {
  &.fwe-btn--tree-node-toggle {
    color: variables.$text;
    padding: 0 variables.$spacer-xxs 0 variables.$spacer-s;
    justify-content: flex-start;
  }

  &.fwe-btn--tree-node-select {
    color: variables.$text;
    justify-content: flex-start;
    min-width: 0;
    flex-basis: 100%;
  }
}

.fwe-btn--tree-node-select {
  .fwe-icon {
    padding-right: 0;
  }
}