@import '../colors';
@import '../variables';

@mixin switcher-default-font-style {
  color: $color-N600;
  font-weight: $font-weight-bold;
}

@mixin switcher-selected-font-style {
  color: $color-B400;
}

.tix-switcher.v4 {
  background-color: $color-N100;
  border: 0.5px solid $color-N200;
  border-radius: 8px;
  padding: 4px;

  display: flex;
  width: fit-content;
  max-width: 100%;

  .tix-switcher-btn.v4 {
    @include switcher-default-font-style;
    padding: 10px 12px;
    display: flex;
    border-radius: 6px;

    .tix-switcher-inner-btn {
      display: flex;
      align-items: center;

      .tix-icon.v4 {
        fill: red !important;

        &:first-child {
          margin-right: 8px;
        }

        &:last-child {
          margin-left: 8px;
        }
      }
    }

    // every child's color must be the same
    * {
      @include switcher-default-font-style;
    }

    &:not(:last-child) {
      margin-right: 4px;
    }

    &.selected {
      @include switcher-selected-font-style;
      background-color: $color-N0;
      box-shadow: 0px 2px 8px rgba(48, 49, 53, 0.16);

      // every child's color must be the same
      * {
        @include switcher-selected-font-style;
      }
    }
  }
}