@use "sass:map";
@use "sass:list";

@function get-state-color($state) {
  @return map.get((
    default: (var(--ui-kit-color-main), var(--ui-kit-color-hover), var(--ui-kit-color-main), var(--ui-kit-color-background)),
    success: (var(--ui-kit-color-green-1), var(--ui-kit-color-green-6), var(--ui-kit-color-green-7), var(--ui-kit-color-green-5)),
    warning: (var(--ui-kit-color-orange), var(--ui-kit-color-orange-6), var(--ui-kit-color-orange-7), var(--ui-kit-color-orange-4)),
    error: (var(--ui-kit-color-red-1), var(--ui-kit-color-red-4), var(--ui-kit-color-red-3), var(--ui-kit-color-red-3)),
  ), $state)
}

@mixin setIconColor($color) {
  &.fill {
    fill: $color;
    stroke: none;
  }

  &.stroke {
    stroke: $color;
    fill: none;
  }
}

@mixin applyStateColors($state) {
  .#{$state} {
    &.primary {
      color: var(--ui-kit-color-white);
      background: list.nth(get-state-color($state), 1);

      &:hover {
        background: list.nth(get-state-color($state), 2);
      }

      &.active,
      &:active {
        background: list.nth(get-state-color($state), 1);
      }

      .kit-button-icon {
        @include setIconColor(var(--ui-kit-color-white));
      }
    }

    &.ghost {
      color: var(--ui-kit-color-grey-10);
      @if $state == warning {
        border-color: var(--ui-kit-color-orange);
        background: var(--ui-kit-color-orange-4);
      } @else if $state == error {
        border-color: var(--ui-kit-color-red-1);
        background: var(--ui-kit-color-red-4);
      } @else {
        border-color: var(--ui-kit-color-grey-11);
        background: var(--ui-kit-color-white);
      }

      &:hover {
        color: list.nth(get-state-color($state), 2);
        border-color: list.nth(get-state-color($state), 2);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 2));
        }
      }

      &.active,
      &:active {
        color: list.nth(get-state-color($state), 3);
        border-color: list.nth(get-state-color($state), 3);
        background: list.nth(get-state-color($state), 4);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 3));
        }
      }

      .kit-button-icon {
        @include setIconColor(var(--ui-kit-color-grey-10));
      }
    }

    &.text {
      color: var(--ui-kit-color-grey-10);
      background: none;

      &:disabled {
        border: none;
        background: none;
      }

      &:hover,
      &.active,
      &:active {
        background: var(--ui-kit-color-grey-13);
      }

      &:hover {
        color: list.nth(get-state-color($state), 2);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 2));
        }
      }

      &.active,
      &:active {
        color: var(--ui-kit-color-grey-10);

        .kit-button-icon {
          @include setIconColor(var(--ui-kit-color-grey-10));
        }
      }

      .kit-button-icon {
        @include setIconColor(var(--ui-kit-color-grey-10));
      }
    }

    &.link {
      color: list.nth(get-state-color($state), 1);
      background: none;
      border: none;

      &:disabled {
        background: none;
      }

      &:hover {
        color: list.nth(get-state-color($state), 2);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 2));
        }
      }

      &.active,
      &:active {
        color: list.nth(get-state-color($state), 1);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 1));
        }
      }

      .kit-button-icon {
        @include setIconColor(list.nth(get-state-color($state), 1));
      }
    }

    &.dashed {
      color: list.nth(get-state-color($state), 1);
      border-color: list.nth(get-state-color($state), 1);
      border-style: dashed;
      background: var(--ui-kit-color-white);

      &:disabled {
        border-style: dashed;
      }

      &:hover {
        color: list.nth(get-state-color($state), 2);
        border-color: list.nth(get-state-color($state), 2);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 2));
        }
      }

      &.active,
      &:active {
        color: list.nth(get-state-color($state), 1);
        border-color: list.nth(get-state-color($state), 1);

        .kit-button-icon {
          @include setIconColor(list.nth(get-state-color($state), 1));
        }
      }

      .kit-button-icon {
        @include setIconColor(list.nth(get-state-color($state), 1));
      }
    }
  }
}

@mixin styles {
  @include applyStateColors(default);
  @include applyStateColors(success);
  @include applyStateColors(warning);
  @include applyStateColors(error);

  .k-button-text {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .kit-button-icon {
    display: block;
  }

  .k-button {
    font-weight: 400;
    border: 1px solid transparent;
    line-height: 1;
    transition: none;

    &:focus {
      box-shadow: none;
    }

    &:disabled {
      color: var(--ui-kit-color-grey-12);
      border: 1px solid var(--ui-kit-color-grey-11);
      background: var(--ui-kit-color-grey-13);

      .kit-button-icon {
        @include setIconColor(var(--ui-kit-color-grey-12));
      }
    }
  }

  .large {
    padding: 0 16px;
    height: 40px;
    font-size: 16px;
    border-radius: 8px;

    .kit-button-icon {
      width: 18px;
      height: 18px;
    }
  }

  .medium {
    padding: 0 16px;
    height: 32px;
    font-size: 14px;
    border-radius: 6px;

    .kit-button-icon {
      width: 16px;
      height: 16px;
    }
  }

  .small {
    padding: 0 8px;
    height: 24px;
    font-size: 14px;
    border-radius: 4px;

    .kit-button-icon {
      width: 14px;
      height: 14px;
    }
  }

  .leading {
    .k-button-text {
      flex-direction: row-reverse;
    }
  }

  .trailing {
    .k-button-text {
      flex-direction: row;
    }
  }

  .no-label {
    &.large {
      padding: 0 11px;
    }

    &.medium {
      padding: 0 8px;
    }

    &.small {
      padding: 0 6px;
    }
  }
}