$button-type-sizes: 'small' calculateRem(12), 'large' calculateRem(22) !default;

$button-background: var(--color-white) !default;
$button-border-color: var(--color-light-grey) !default;
$button-border-width: 1px !default;
$button-color: var(--color-black) !default;
$button-font-size: calculateRem(16) !default;
$button-line-height: 1.6 !default;
$button-margin-bottom: calculateRem(6.4) !default;
$button-padding: calculateRem(8) calculateRem(12) !default;
$button-transition: border-color 0.2s ease, background-color 0.3s ease !default;
$button-hover-border: var(--color-light-grey-darker) !default;
$button-hover-background: $button-background !default;
$button-hover-color: $button-color !default;
$button-radius: 0 !default;
$button-rounded-radius: 6px !default;

$button-loading-speed: 0.8s !default;
$button-loading-width: 2px !default;
$button-loading-color: var(--color-light-grey) !default;

$button-addon-radius: $button-rounded-radius !default;

$button-group-gap: calculateRem(6.4) !default;

$button-close-background: createColor(rgba(57, 57, 57, 0.23)) !default;
$button-close-height: calculateRem(24) !default;
$button-close-width: calculateRem(24) !default;
$button-close-hover: createColor(rgba(57, 57, 57, 0.41)) !default;
$button-cross-color: inherit !default;
$button-cross-width: 1px !default;

.button {
  --border-width: #{$button-border-width};
  --border-color: #{$button-border-color};
  --font-size: #{$button-font-size};
  --line-height: #{$button-line-height};
  --margin-bottom: #{$button-margin-bottom};
  --padding: #{$button-padding};
  --transition: #{$button-transition};
  --background-color: #{$button-background};
  --font-color: #{$button-color};
  --button-radius: #{$button-radius};

  --hover-background-color: #{$button-hover-background};
  --hover-font-color: #{$button-hover-color};
  --hover-border-color: #{$button-hover-border};

  --loading-speed: #{$button-loading-speed};
  --loading-width: #{$button-loading-width};
  --loading-color: #{$button-loading-color};

  align-items: center;
  border-width: var(--border-width);
  border-style: solid;
  border-radius: var(--button-radius);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--font-size);
  justify-content: center;
  line-height: var(--line-height);
  margin-bottom: var(--margin-bottom);
  padding: var(--padding);
  text-align: center;
  transition: var(--transition);

  &:hover, a {
    text-decoration: none;
  }

  @include element-color(var(--background-color), var(--border-color), var(--font-color));

  &:hover, &:focus, &:active, &.is-active {
    --background-color: var(--hover-background-color);
    --border-color: var(--hover-border-color);
    --font-color: var(--hover-font-color);
  }

  &.is-rounded {
    --button-radius: #{$button-rounded-radius};
  }

  @each $size in $button-type-sizes {
    &.is-#{nth($size, 1)} {
      --font-size: #{nth($size, 2)};
    }
  }

  &.is-full {
    width: 100%;
  }

  @each $color in $color-palette {
    &.is-#{nth($color, 1)}:not(.is-outline) {
      --background-color: var(--color-#{nth($color, 1)});
      --border-color: transparent;
      --font-color: var(--color-#{nth($color, 1)}-text);

      &:hover:not([disabled]), &.is-active {
        --background-color: var(--color-#{nth($color, 1)}-darker);
      }

      &.is-loading::after {
        border-right-color: var(--color-#{nth($color, 1)}-text);
        border-top-color: var(--color-#{nth($color, 1)}-text);
      }
    }

    &.is-#{nth($color, 1)}.is-outline {
      --background-color: transparent;
      --border-color: var(--color-#{nth($color, 1)});
      --font-color: var(--color-#{nth($color, 1)});

      &:hover:not([disabled]), &.is-active {
        --background-color: var(--color-#{nth($color, 1)});
        --border-color: transparent;
        --font-color: var(--color-#{nth($color, 1)}-text);
      }

      &.is-loading::after {
        border-right-color: var(--color-#{nth($color, 1)});
        border-top-color: var(--color-#{nth($color, 1)});
      }
    }
  }

  &.is-loading {

    color: transparent !important;
    pointer-events: none;
    position: relative;

    &::after {
      animation: spinner var(--loading-speed) linear infinite;
      border: var(--loading-width) solid var(--loading-color);
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      content: ' ';
      display: block;
      height: 1.25em;
      left: calc(50% - (1.25em / 2));
      position: absolute;
      top: calc(50% - (1.25em / 2));
      width: 1.25em;
      position: absolute !important;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .icon {
    &:first-child:not(:only-child) {
      margin-right: 0.45rem;
    }

    &:last-child:not(:only-child) {
      margin-left: 0.45rem;
    }
  }

  :not(.is-button-group):not(.is-addon-group) > & {
    align-self: flex-start;
  }
}

.is-addon-group, .is-button-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.is-button-group {
  --gap: #{$button-group-gap};

  & > .button:not(.is-full):not(:last-child) {
    margin-right: var(--gap);
  }

  & > .is-addon-group:not(:last-child) {
    margin-right: var(--gap);
  }

  & > .is-addon-group {
    width: auto;
  }
}

.is-addon-group {
  --addon-radius: #{$button-addon-radius};
  & > .button {
    margin-right: 0;

    &:not(:first-of-type) {
      border-left-width: calc(var(--border-width) / 2);
    }

    &:not(:last-of-type) {
      border-right-width: calc(var(--border-width) / 2);
    }
  }

  &.is-rounded .button {
    &:last-child {
      border-top-right-radius: var(--addon-radius);
      border-bottom-right-radius: var(--addon-radius);
    }

    &:first-child {
      border-bottom-left-radius: var(--addon-radius);
      border-top-left-radius: var(--addon-radius);
    }
  }
}

.button--close {
  --background-color: #{$button-close-background};
  --icon-color: #{$button-cross-color};
  --height: #{$button-close-height};
  --width: #{$button-close-width};
  --icon-width: #{$button-cross-width};

  --hover-background-color: #{$button-close-hover};

  align-items: center;
  background-color: var(--background-color);
  border: none;
  border-radius: 50%;
  color: var(--icon-color);
  cursor: pointer;
  display: inline-block;
  height: var(--height);
  position: relative;
  text-align: center;
  width: var(--width);

  &.has-no-background {
    --background-color: transparent;
  }

  &:not(.has-no-background):hover {
    --background-color: var(--hover-background-color);
  }

  &::before, &::after {
    border-color: inherit;
    border-style: solid;
    border-width: var(--icon-width);
    content: ' ';
    left: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center center;
    top: 50%;
  }

  &::after {
    width: 50%;
  }

  &::before {
    height: 50%;
  }
}