@use './theme.scss' as *;

@mixin type-modifier($type) {
  & {
    color: button-theme-color('#{$type}-color');
    background: button-theme-color('#{$type}-background');

    &::before {
      border-color: button-theme-color('#{$type}-border-color');
    }

    &:hover {
      background: button-theme-color('#{$type}-hover-background');

      &::before {
        border-color: button-theme-color('#{$type}-hover-border-color');
      }
    }

    &:active {
      background: button-theme-color('#{$type}-active-background');

      &::before {
        border-color: button-theme-color('#{$type}-active-border-color');
      }
    }

    &:focus-visible {
      outline: button-theme-color('#{$type}-focus-outline');
    }

    &:disabled,
    &[disabled] {
      color: button-theme-color('#{$type}-disabled-color');
      background: button-theme-color('#{$type}-disabled-background');

      &::before {
        border-color: button-theme-color('#{$type}-disabled-border-color');
      }
    }
  }
}

$root: 'button';

.#{$root} {
  @include button-theme-modifiers();

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: none;
  border-radius: 10px;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 1px;
    border-radius: 10px;
    border-style: solid;
    z-index: -1;
  }

  &:active {
    outline: none;
  }

  &:disabled,
  &[disabled] {
    pointer-events: none;
    outline: none;
    cursor: default;
  }

  &--large {
    height: 60px;
    min-width: 120px;
    padding: 0 30px;
  }

  &--medium {
    height: 40px;
    min-width: 117px;
    padding: 0 30px;
  }

  &--medium-round {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding: 0;

    &.#{$root}::before {
      border-radius: 50%;
    }
  }

  &--small {
    height: 25px;
    min-width: 40px;
    border-radius: 13px;
    padding: 0 30px;

    &.#{$root}::before {
      border-radius: 13px;
    }
  }

  &--small-round {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    padding: 0;

    &.#{$root}::before {
      border-radius: 50%;
    }
  }

  &--primary {
    @include type-modifier('primary');
  }

  &--secondary {
    @include type-modifier('secondary');
  }

  &--tertiary {
    @include type-modifier('tertiary');

    &::before {
      display: none;
    }
  }

  &--with-loader {
    pointer-events: none;
    color: button-theme-color('primary-color');
  }

  &--no-padding {
    padding: 0;
  }

  &__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__caption-text {
    &--withIcon {
      margin-left: 5px;
    }

    &--disabled {
      opacity: 0.6;
    }
  }
}