@use "../mixins/mixins" as *;
@use "../mixins/function" as *;
@use "../common/var.scss" as *;

@include b(button) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  @include e(icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    svg {
      height: 1em;
      width: 1em;
    }
  }
  @include when(circle) {
    border-radius: getCssVar("radius", "circle");
  }
  @include when(block) {
    width: 100% !important;
  }
  @include when(secondary) {
    color: getCssVar("color", "text-1");
    background-color: getCssVar("color", "fill-2");
    border: 1px solid getCssVar("color", "fill-2");
    &:hover {
      color: getCssVar("color", "text-1");
      background-color: getCssVar("color", "fill-3");
      border: 1px solid getCssVar("color", "fill-3");
    }
    &:active {
      color: getCssVar("color", "text-1");
      background-color: getCssVar("color", "fill-4");
      border: 1px solid getCssVar("color", "fill-4");
    }
    @include when(disabled, loading) {
      cursor: default;
      color: getCssVar("color", "text-3");
      border: 1px solid getCssVar("color", "fill-2");
      background-color: getCssVar("color", "fill-2");
      &:hover {
        color: getCssVar("color", "text-3");
        background-color: getCssVar("color", "fill-2");
        border: 1px solid getCssVar("color", "fill-2");
      }
    }
  }
  @include m(default) {
    background-color: getCssVar("color", "bg-2");
    color: getCssVar("color", "text-1");
    border: 1px solid getCssVar("color", "fill-3");
    &:hover {
      color: getCssVar("color", "primary-6");
      border: 1px solid getCssVar("color", "primary-6");
    }
    &:active {
      color: getCssVar("color", "primary-6");
      border: 1px solid getCssVar("color", "primary-6");
      background-color: getCssVar("color", "fill-2");
    }
    &:focus-visible {
      box-shadow: 0 0 0 4px getCssVar("color", "primary-3");
    }
    @include when(disabled, loading) {
      cursor: default;
      color: getCssVar("color", "text-3");
      border: 1px solid getCssVar("color", "fill-2");
      &:hover {
        color: getCssVar("color", "text-3");
        border: 1px solid getCssVar("color", "fill-2");
      }
    }
    @include this-is(text) {
      background-color: transparent;
      border: 1px solid transparent;
      &:hover {
        background-color: getCssVar("color", "fill-2");
        border: 1px solid getCssVar("color", "fill-2");
        color: getCssVar("color", "text-1");
      }
      &:active {
        background-color: getCssVar("color", "fill-3");
        border: 1px solid getCssVar("color", "fill-3");
        color: getCssVar("color", "text-1");
      }
    }
  }

  @each $type in $type-list {
    @include m(#{$type}) {
      background-color: getCssVar("color", #{$type}-6);
      color: #fff;
      border: 1px solid getCssVar("color", #{$type}-6);
      &:hover {
        background-color: getCssVar("color", #{$type}-5);
        border: 1px solid getCssVar("color", #{$type}-5);
      }
      &:active {
        background-color: getCssVar("color", #{$type}-7);
        border: 1px solid getCssVar("color", #{$type}-7);
      }
      &:focus-visible {
        box-shadow: 0 0 0 4px getCssVar("color", #{$type}-3);
      }
      @include be(button, icon) {
        color: #fff;
      }
      @include when(disabled, loading) {
        cursor: default;
        background-color: getCssVar("color", #{$type}-4);
        border: 1px solid getCssVar("color", #{$type}-4);
        &:hover {
          background-color: getCssVar("color", #{$type}-4);
          border: 1px solid getCssVar("color", #{$type}-4);
        }
      }
      @include this-is(text) {
        background-color: transparent;
        border: 1px solid transparent;
        color: getCssVar("color", #{$type}-6);
        &:hover {
          background-color: getCssVar("color", "fill-2");
          border: 1px solid getCssVar("color", "fill-2");
        }
      }
      @include this-is(link) {
        background-color: transparent;
        border: 1px solid transparent;
        color: getCssVar("color", #{$type}-6);
        &:hover {
          background-color: transparent;
          border: 1px solid transparent;
          color: getCssVar("color", #{$type}-5);
        }
        &:active {
          color: getCssVar("color", #{$type}-7);
        }
      }
    }
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      height: getCssVar("size", #{$size});
      font-size: getCssVar("font-size", #{$size});
      line-height: getCssVar("line-height", #{$size});
      border-radius: getCssVar("radius", #{$size});
      @if $size == mini {
        padding: 0 11px;
        gap: 4px;
      }
      @if $size == small {
        padding: 0 11px;
        gap: 4px;
      }
      @if $size == medium {
        padding: 0 15px;
        gap: 8px;
      }
      @if $size == large {
        padding: 0 19px;
        gap: 8px;
      }
      @include be(button, icon) {
        font-size: getCssVar("font-size", #{$size});
      }
      @include when(only-icon) {
        height: getCssVar("size", #{$size});
        width: getCssVar("size", #{$size});
        line-height: getCssVar("size", #{$size});
        padding: 0;
      }
      @include this-is(link) {
        height: getCssVar("line-height", #{$size});
        line-height: getCssVar("line-height", #{$size});
        @if $size == mini {
          padding: 0 4px;
        }
        @if $size == small {
          padding: 0 4px;
        }
        @if $size == medium {
          padding: 0 8px;
        }
        @if $size == large {
          padding: 0 8px;
        }
      }
    }
  }
}

@include b(button-group) {
  display: flex;
  @include b(button) {
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      @include when(secondary) {
        border-right: 1px solid getCssVar("color", "fill-3");
        &:hover {
          border-right: 1px solid getCssVar("color", "fill-3");
        }
      }
    }
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      @include when(secondary) {
        border-left: 1px solid transparent;
        &:hover {
          border-left: 1px solid getCssVar("color", "fill-3");
        }
      }
    }
  }
  @include bm(button, default) {
    &:not(:last-child) {
      border-right: 1px solid getCssVar("color", "fill-3");
      &:hover {
        border-right: 1px solid getCssVar("color", "primary-6");
      }
    }
    &:not(:first-child) {
      border-left: 1px solid transparent;
      &:hover {
        border-left: 1px solid getCssVar("color", "primary-6");
      }
    }
    @include when(link) {
      border-right: none;
      &:hover {
        border-right: none;
      }
    }
  }
  @each $type in $type-list {
    @include bm(button, #{$type}) {
      &:not(:last-child) {
        border-right: 1px solid getCssVar("color", #{$type}-5);
      }
      @include when(link) {
        border-right: none;
      }
    }
  }
  @each $size in $size-list {
    @include bm(button, #{$size}) {
      &:not(:last-child) {
        @include when(link) {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -1px;
            width: 0;
            height: getCssVar("font-size", #{$size});
            border-right: 1px solid getCssVar("color", "fill-3");
          }
        }
      }
    }
  }
}