@use 'sass:map';
@import 'mixins/size';

@include b(button) {
  $selector: &;
  $disabled-selector: ':disabled:not(.is-loading)';

  @include utils-button;

  position: relative;
  min-width: var(--#{$rd-prefix}size);
  height: var(--#{$rd-prefix}size);
  margin: 0;
  border-radius: var(--#{$rd-prefix}border-radius);
  transition: border-color var(--#{$rd-prefix}animation-duration-base) linear, color var(--#{$rd-prefix}animation-duration-base) linear,
    background-color var(--#{$rd-prefix}animation-duration-base) linear;

  &:disabled {
    pointer-events: none;
  }

  @include when(loading) {
    pointer-events: none;
  }

  @include component-size;

  @each $theme, $rgb in $rd-themes {
    @include theme(#{$theme}) {
      --#{$rd-prefix}button-color: var(--#{$rd-prefix}color-#{$theme});
      --#{$rd-prefix}button-color-lighter: var(--#{$rd-prefix}color-#{$theme}-lighter);
      --#{$rd-prefix}button-color-darker: var(--#{$rd-prefix}color-#{$theme}-darker);
      --#{$rd-prefix}button-text-hover-background: var(--#{$rd-prefix}background-color-#{$theme}-hover);
      --#{$rd-prefix}button-text-active-background: var(--#{$rd-prefix}background-color-#{$theme});
    }
  }

  @include m(primary) {
    padding: 0 calc(var(--#{$rd-prefix}padding-size) - 1px);
    color: map.get($rd-colors, 'white');
    background-color: var(--#{$rd-prefix}button-color);
    border: 1px solid var(--#{$rd-prefix}button-color);

    &:hover,
    &:focus,
    &.is-loading {
      background-color: var(--#{$rd-prefix}button-color-lighter);
      border-color: var(--#{$rd-prefix}button-color-lighter);
    }

    &:active {
      background-color: var(--#{$rd-prefix}button-color-darker);
      border-color: var(--#{$rd-prefix}button-color-darker);
    }

    &#{$disabled-selector} {
      filter: saturate(50%) grayscale(50%);
    }
  }

  @include m(secondary) {
    padding: 0 calc(var(--#{$rd-prefix}padding-size) - 1px);
    color: var(--#{$rd-prefix}text-color);
    background-color: transparent;
    border: 1px solid var(--#{$rd-prefix}color-border);

    &:hover,
    &:focus,
    &.is-loading {
      color: var(--#{$rd-prefix}button-color-lighter);
      border-color: var(--#{$rd-prefix}button-color-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}button-color-darker);
      border-color: var(--#{$rd-prefix}button-color-darker);
    }

    &#{$disabled-selector} {
      color: var(--#{$rd-prefix}color-disabled);
      pointer-events: none;
      background-color: var(--#{$rd-prefix}background-color-disabled);
    }
  }

  @include m(outline) {
    padding: 0 calc(var(--#{$rd-prefix}padding-size) - 1px);
    color: var(--#{$rd-prefix}button-color);
    background-color: transparent;
    border: 1px solid var(--#{$rd-prefix}button-color);

    &:hover,
    &:focus,
    &.is-loading {
      color: var(--#{$rd-prefix}button-color-lighter);
      border-color: var(--#{$rd-prefix}button-color-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}button-color-darker);
      border-color: var(--#{$rd-prefix}button-color-darker);
    }

    &#{$disabled-selector} {
      color: var(--#{$rd-prefix}color-disabled);
      border-color: var(--#{$rd-prefix}color-border);
    }
  }

  @include m(dashed) {
    padding: 0 calc(var(--#{$rd-prefix}padding-size) - 1px);
    color: var(--#{$rd-prefix}button-color);
    background-color: transparent;
    border: 1px dashed var(--#{$rd-prefix}button-color);

    &:hover,
    &:focus,
    &.is-loading {
      color: var(--#{$rd-prefix}button-color-lighter);
      border-color: var(--#{$rd-prefix}button-color-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}button-color-darker);
      border-color: var(--#{$rd-prefix}button-color-darker);
    }

    &#{$disabled-selector} {
      color: var(--#{$rd-prefix}color-disabled);
      border-color: var(--#{$rd-prefix}color-border);
    }
  }

  @include m(text) {
    padding: 0 var(--#{$rd-prefix}padding-size);
    color: var(--#{$rd-prefix}text-color);
    background-color: transparent;
    border: none;

    &:hover,
    &:focus,
    &.is-loading {
      color: var(--#{$rd-prefix}button-color-lighter);
      background-color: var(--#{$rd-prefix}button-text-hover-background);
    }

    &:active {
      color: var(--#{$rd-prefix}button-color-darker);
      background-color: var(--#{$rd-prefix}button-text-active-background);
    }

    &#{$disabled-selector} {
      color: var(--#{$rd-prefix}color-disabled);
      pointer-events: none;
      background-color: var(--#{$rd-prefix}background-color-disabled);
    }
  }

  @include m(link) {
    min-width: unset;
    height: auto;
    padding: 0;
    color: var(--#{$rd-prefix}button-color);
    background-color: transparent;
    border: none;

    &:hover,
    &:focus,
    &.is-loading {
      color: var(--#{$rd-prefix}button-color-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}button-color-darker);
    }

    &#{$disabled-selector} {
      color: var(--#{$rd-prefix}color-disabled);
    }
  }

  @include m(circle) {
    border-radius: 50%;
  }

  @include m(round) {
    border-radius: calc(var(--#{$rd-prefix}size) / 2);
  }

  @include m(block) {
    width: 100%;
  }

  @include m(icon) {
    &:not(#{$selector}--round) {
      padding: 0;
    }

    @include e(icon) {
      width: auto;
      font-size: 1.2em;
    }
  }

  @include e(icon) {
    display: inline-flex;
    width: calc(1em + 8px);

    @include m(right) {
      justify-content: flex-end;
    }
  }
}