@if $css-variable-enabled {
  $button-border-radius: var(--button-border-radius);
  $button-border-spread: var(--button-border-spread);
  $button-border-width: var(--button-border-width);
  $button-margin: var(--button-margin);
  $button-outlined-border-width: var(--button-outlined-border-width);
  $medium-text: var(--medium-text);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}btn {
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-bg-color);
  border-style: solid;
  border-color: var(--button-border-color);
  padding: 8px 12px;
  color: var(--button-text-color);
  text-align: center;
  text-decoration: none;
  border-radius: $button-border-radius;
  border-width: $button-border-width;
  margin: $button-margin;
  font-size: $medium-text;
  transition: $primary-transition;

  > .#{$prefix}icon:only-child {
    margin: 0 -4px;
  }

  .#{$prefix}icon {
    margin: 0;
    --icon-size: 1rem;

    &:first-child:not(:last-child):not(:only-child) {
      margin-right: 0.3em;
      margin-left: -0.2em;
    }

    &:last-child:not(:first-child):not(:only-child) {
      margin-right: -0.2em;
      margin-left: 0.3em;
    }
  }

  &.#{$prefix}floating {
    border-color: $transparent;
    box-shadow: 0px 1px 4px 0px var(--button-shadow-color);

    &:hover, &.#{$prefix}hovered, &:focus, &.#{$prefix}focused {
      transform: translateY(-2px);
      border-color: $transparent;
    }
  }

  &:hover, &.#{$prefix}hovered, input:checked + & {
    border-color: var(--button-hovered-border-color);
  }

  &:focus, &.#{$prefix}focused {
    border-color: var(--button-border-spread-color);
    @if $css-variable-enabled {
      box-shadow: 0 0 0 var(--button-border-spread) var(--button-border-spread-color);
    } @else {
      box-shadow: 0 0 0 $button-border-spread var(--button-border-spread-color);
    }
  }

  &[disabled] {
    pointer-events: none;
    cursor: default !important;
    opacity: 0.6;
  }

  &.#{$prefix}transparent {
    background-color: $transparent !important;
    border-color: $transparent !important;

    &:hover, &.#{$prefix}hovered, input:checked + & {
      background-color: rgba(144, 144, 144, 0.1) !important;
      box-shadow: 0 0 0 0px rgba(144, 144, 144, 0.1) !important;
    }

    &:focus, &.#{$prefix}focused {
      background-color: $transparent;
    }
  }

  &.#{$prefix}custom, .#{$prefix}btns-custom > &:not(.#{$prefix}ignored) {
    background-color: $transparent;
    border-color: $transparent;
    color: $white;

    &.#{$prefix}floating {
      box-shadow: 0px 2px 3px 0px var(--button-shadow-color);
    }

    &:focus, &.#{$prefix}focused {
      box-shadow: 0 0 0 $button-border-spread rgba(144, 144, 144, 0.15);
    }
  }

  // Colors
  @each $name, $color, $txt-color, $hovered-color, $border-spread-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} {
        background-color: $color !important;
        color: $txt-color;

        &:not(.#{$prefix}outlined) {
          border-color: $transparent !important;
        }

        &:hover, &.#{$prefix}hovered, input:checked + & {
          background-color: $hovered-color !important;
        }

        &:focus, &.#{$prefix}focused {
          box-shadow: 0 0 0 $button-border-spread $border-spread-color !important;
        }
      }

      &.#{$prefix}floating.#{$prefix}#{$name} {
        box-shadow: 0px 2px 3px 1px $border-spread-color;
      }
    }
  }

  &.#{$prefix}full-width, &.#{$prefix}fullwidth, .#{$prefix}btns-full-width > &:not(.#{$prefix}ignored), .#{$prefix}btns-fullwidth > &:not(.#{$prefix}ignored) {
    @extend %full-width;
  }

  &.#{$prefix}max-pad {
    padding: 12px 20px;
    border-radius: 2px;
  }

  &.#{$prefix}xlarge, .#{$prefix}btns-xlarge > &:not(.#{$prefix}ignored) {
    font-size: $xlarge-text !important;
    padding: 18px 27px !important;

    &.#{$prefix}max-pad {
      padding: 20px 40px !important;
    }

    > .#{$prefix}icon:only-child {
      margin: 0 -9px;
    }

    .#{$prefix}icon {
      --icon-size: 1.9rem;
    }
  }

  &.#{$prefix}large, .#{$prefix}btns-large > &:not(.#{$prefix}ignored) {
    font-size: $large-text !important;
    padding: 14px 21px !important;

    &.#{$prefix}max-pad {
      padding: 18px 30px !important;
    }

    > .#{$prefix}icon:only-child {
      margin: 0 -7px;
    }

    .#{$prefix}icon {
      --icon-size: 1.4rem;
    }
  }

  &.#{$prefix}default {
    width: max-content !important;
    height: max-content !important;
    font-size: $medium-text !important;
    padding: 8px 12px !important;
  }

  &.#{$prefix}small, .#{$prefix}small > &:not(.#{$prefix}ignored) {
    font-size: $small-text !important;
    padding: 4px 12px !important;

    &.#{$prefix}max-pad {
      padding: 8px 16px !important;
    }

    > .#{$prefix}icon:only-child {
      margin: 0 -8px;
    }

    .#{$prefix}icon {
      --icon-size: 0.8rem;
    }
  }

  &.#{$prefix}outlined, &.#{$prefix}ghost, .#{$prefix}btns-outlined > &:not(.#{$prefix}ignored), .#{$prefix}btns-ghost > &:not(.#{$prefix}ignored) {
    background-color: $transparent !important;
    border-width: $button-outlined-border-width !important;
  }

  &.#{$prefix}outlined, .#{$prefix}btns-outlined > &:not(.#{$prefix}ignored) {
    &:hover, &.#{$prefix}hovered {
      background-color: $transparent !important;
    }
  }


  @each $name, $color, $text-color, $hovered-color in $item-colors {
    @if $name {
      &.#{$prefix}outlined.#{$prefix}#{$name}, .#{$prefix}btns-outlined > &.#{$prefix}#{$name}:not(.#{$prefix}ignored),
      &.#{$prefix}ghost.#{$prefix}#{$name}, .#{$prefix}btns-ghost > &.#{$prefix}#{$name}:not(.#{$prefix}ignored) {
        border-color: $color !important;
        color: $color;

        &:hover, &.#{$prefix}hovered {
          border-color: $hovered-color !important;
        }
      }

      &.#{$prefix}ghost.#{$prefix}#{$name}, .#{$prefix}btns-ghost > &.#{$prefix}#{$name}:not(.#{$prefix}ignored) {
        &:hover, &.#{$prefix}hovered, &:focus, &.#{$prefix}focused {
          background-color: $hovered-color !important;
          color: $text-color !important;
          border-color: $hovered-color !important;
        }
      }
    }
  }

  &.#{$prefix}fullwidth,
  &.#{$prefix}full-width {
    margin-left: 0;
    margin-right: 0;
  }
}

.#{$prefix}toggle-btn {
  input[type="checkbox"], input[type="radio"] {
    display: none;
  }

  input:checked + .#{$prefix}btn {
    filter: brightness(0.9);
  }

  .#{$prefix}el-group > & {
    > .#{$prefix}btn {
      margin: 0 !important;
    }
  }
}