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

@mixin segment-disabled {
  background-color: variables.$gray-100;
  color: #3333334d;
  border-color: variables.$control-disabled;
  border-right: 1px solid variables.$control-disabled;
}

.fwe-segment {
  display: inline-block;
  padding: 0;
  border: 0;

  &-group {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }

  &-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: variables.$spacer-l;
    width: 100%;
    white-space: nowrap;
    padding: 0 variables.$spacer-m;
    font-size: variables.$font-size-base;
    text-align: center;
    cursor: pointer;
    border: 1px solid variables.$gray-300;
    color: variables.$hero-gray;
    background-color: variables.$white;

    &:hover {
      color: variables.$hero-active;
      border-color: variables.$hero-active;
      border-right: 1px solid variables.$hero-active;
      + .fwe-segment-input {
        + .fwe-segment-label {
          border-left: 1px solid variables.$hero-active;
        }
      }
    }
  }

  .fwe-segment-label {
    &:not(:last-child) {
      border-right: 0;
    }
  }

  &-input {
    @include mixins.visual-hidden();
    &:disabled {
      + .fwe-segment-label {
        pointer-events: none;
        color: #a3b2bc4d;
        border-color: variables.$control-disabled;
        border-right: 1px solid variables.$control-disabled;
        &:not(:last-child) {
          border-right: 0;
        }
      }
    }
    &:checked:not(:disabled) {
      + .fwe-segment-label {
        position: relative;
        background-color: variables.$caerul;
        color: variables.$white;
        border-color: variables.$caerul;
        &:not(:last-child) {
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: -1px;
            right: -1px;
            height: variables.$spacer-l;
            width: 1px;
            background-color: variables.$caerul;
          }
        }
      }
      &:disabled {
        + .fwe-segment-label {
          @include segment-disabled();
        }
      }
    }
  }

  .fwe-segment-label {
    &:nth-child(2) {
      border-radius: variables.$control-border-radius 0 0 variables.$control-border-radius;
    }
  }

  .fwe-segment-label {
    &:last-child {
      border-radius: 0 variables.$control-border-radius variables.$control-border-radius 0;
    }
  }

  &.fwe-segment-outline {
    .fwe-segment-input {
      &:checked {
        + .fwe-segment-label {
          background-color: variables.$sucaerul;
          color: variables.$caerul;
          border-color: variables.$caerul;
        }

        &:disabled {
          + .fwe-segment-label {
            @include segment-disabled();
            &:not(:last-child) {
              border-right: 0;
            }
          }
        }
      }
    }
  }

  &.fwe-segment-icon {
    .fwe-segment-label {
      padding: 0 variables.$spacer-s;
      line-height: 30px;
    }
    .fwe-segment-input {
      &:checked {
        &:disabled {
          + .fwe-segment-label {
            @include segment-disabled();
            &:not(:last-child) {
              border-right: 0;
            }
          }
        }
      }
    }
  }
}