ui-button {
  $base: unquote(".ui-btn");
  // TYPE DEFAULT
  &[data-type="default"] {
    color: var(--primary, $primary);
    border: solid 1px $gray-15;
    &:hover,
    &:focus-within {
      color: $white;
      background-color: var(--primary, $primary);
    }
  }

  //TYPE OUTLINE
  &[data-type="outline"] {
    &:active {
      background-color: transparent;
    }
    &:hover {
      background-color: var(--primary, $primary);
      color: $white;
    }
    #{$base}__inner {
      > .ui-btn::before {
        background-image: none;
      }
    }
  }

  //TYPE SOLID
  &[data-type="solid"] {
    background-color: var(--primary, $primary);
    color: $white;
    &:hover,
    &:focus-within {
      background-color: var(--primary-white-75, mix($primary, $white, 75%));
      outline: none;
    }
  }

  //TYPE TOOL
  &[data-type="tool"] {
    border: 1px solid $gray-15;
    &:hover {
      border: solid 1px var(--primary, $primary);
      background-color: var(--primary-white-10, mix($primary, $white, 10%));
      transition: 0.5s;
    }
  }

  // TYPE GHOST
  &[data-type="ghost"] {
    border: none;
    color: var(--primary, $primary);
    .ui-btn__label {
      font-weight: 500;
    }
    &:hover {
      background-color: transparent;
      color: var(--primary-black-40, mix($primary, $black, 40%));
    }
  }
}

.ui-btn {
  $btn-shadow: 2px 2px 8px 1px rgba($shadow, 0.1), 0 1px 1px rgba($shadow, 0.2);
  $btn-active-shadow: inset 0 1px 2px rgba($shadow, 0.2);
  $btn-gloss: linear-gradient(180deg, rgba(#ffffff, 0.1), rgba(#ffffff, 0));

  $btn-bg: mix($base-theme, $base-invert, 99%);
  $btn-color: mix($btn-bg, $base-color, 30%);

  $root: #{&};
  $base: unquote(".ui-btn");
  &[data-active="true"],
  &[data-open="true"],
  &:active {
    background-color: $btn-active;
    box-shadow: $btn-active-shadow;
  }

  // Ripple effect
  @if ($button-ripple) {
    &::after {
      background-image: radial-gradient(circle, var(--btn-ripple) 1%, transparent 1%);
    }
  }

  // THEMES & TYPES

  @mixin make-button-variable($theme, $theme-color, $fallback-color) {
    &__group.ui-theme--#{$theme},
    &__wrapper.ui-theme--#{$theme} {
      & #{$base} {
        --btn-ripple: var(--#{$theme}-white-75, mix($fallback-color, $white, 75%));
      }

      // TYPE GHOST
      &[data-type="ghost"] {
        border: none;
        color: $theme-color;
        .ui-btn__label {
          font-weight: 500;
        }
        &:hover {
          background-color: transparent;
          color: var(--#{$theme}-black-40, mix($fallback-color, $black, 40%));
        }
      }

      // TYPE DEFAULT
      &[data-type="default"] {
        color: $theme-color;
        border: solid 1px $gray-15;
        &:hover,
        &:focus-within {
          color: $white;
          background-color: var(--#{$theme}-btn-bg-90, mix($fallback-color, $btn-bg, 90%));
          outline: none;
        }
      }

      //TYPE TOOL
      &[data-type="tool"] {
        &[data-disabled="true"] {
          #{$base}__inner:hover {
            background-color: transparent;
          }
        }
        border: 1px solid $gray-15;
        color: $theme-color;
        &:hover {
          border: solid 1px $theme-color;
          background-color: var(--#{$theme}-white-10, mix($fallback-color, $white, 10%));
          transition: 0.5s;
        }
      }

      //TYPE OUTLINE
      &[data-type="outline"] {
        color: $theme-color;
        background-color: transparent;
        border: solid 1px $theme-color;
        &:active {
          background-color: transparent;
        }
        &:hover {
          background-color: $theme-color;
          color: $white;
        }
        #{$base}__inner {
          > .ui-btn::before {
            background-image: none;
          }
        }
      }

      //TYPE SOLID
      &[data-type="solid"] {
        background-color: $theme-color;
        color: $white;
        &:hover,
        &:focus-within {
          background-color: var(--#{$theme}-white-75, mix($fallback-color, $white, 75%));
          outline: none;
        }
      }
    }
  }

  @mixin make-button($theme, $theme-color) {
    &__group.ui-theme--#{$theme},
    &__wrapper.ui-theme--#{$theme} {
      & #{$base} {
        --btn-ripple: #{mix($theme-color, $white, 75%)};
      }

      // TYPE GHOST
      &[data-type="ghost"] {
        border: none;
        color: $theme-color;
        .ui-btn__label {
          font-weight: 500;
        }
        &:hover {
          background-color: transparent;
          color: mix($theme-color, $black, 40%);
        }
      }

      // TYPE DEFAULT
      &[data-type="default"] {
        color: $theme-color;
        border: solid 1px $gray-15;
        &:hover,
        &:focus-within {
          color: $white;
          background-color: mix($theme-color, $btn-bg, 90%);
          outline: none;
        }
      }

      //TYPE TOOL
      &[data-type="tool"] {
        &[data-disabled="true"] {
          #{$base}__inner:hover {
            background-color: transparent;
          }
        }
        border: 1px solid $gray-15;
        color: $theme-color;
        &:hover {
          border: solid 1px $theme-color;
          background-color: mix($theme-color, $white, 10%);
          transition: 0.5s;
        }
      }

      //TYPE OUTLINE
      &[data-type="outline"] {
        color: $theme-color;
        background-color: transparent;
        border: solid 1px $theme-color;
        &:active {
          background-color: transparent;
        }
        &:hover {
          background-color: $theme-color;
          color: $white;
        }
        #{$base}__inner {
          > .ui-btn::before {
            background-image: none;
          }
        }
      }

      //TYPE SOLID
      &[data-type="solid"] {
        background-color: $theme-color;
        color: $white;
        &:hover,
        &:focus-within {
          background-color: mix($theme-color, $white, 75%);
          outline: none;
        }
      }
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-button-variable($label, $color, $fallback-color);
  }

  @each $label, $color in $base-colors {
    @include make-button($label, $color);
  }
}

.ui-btn__group {
  box-shadow: $shadow-level1;

  $base: unquote(".ui-btn");

  #{$base}__inner {
    box-shadow: none;
  }

  &#{$base}__group--with-separator:not(&--vertical) {
    #{$base}__wrapper:not(:last-child) {
      #{$base}__inner #{$base} {
        @include property-prefix(padding-end, 0.5em);
      }

      &::after {
        background-color: $base-bg;
        box-shadow: 0 0 2px 0 $gray inset;
      }
    }
  }
}

// UI-TAG

.ui-tag {
  $tag-bg: $base-theme;
  $tag-color: mix($tag-bg, $base-color, 35%);

  background-color: $tag-bg;
  box-shadow: 0 0 0 1px rgba($tag-color, 0.25);
  color: $tag-color;

  &__label:not(:empty) ~ &__value {
    @include property-prefix(border-start, 1px solid rgba($white, 0.3));
  }

  &--solid {
    background-color: $tag-color;
    color: $tag-bg;
  }

  @mixin make-tag-variable($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      box-shadow: 0 0 0 1px $theme-color;
      color: var(--#{$theme}-reverse);
      background-color: $theme-color;

      &.ui-tag--solid {
        background-color: $theme-color;

        .ui-tag__icon,
        .ui-tag__label {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }

  @mixin make-tag($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      box-shadow: 0 0 0 1px $theme-color;
      color: set-color($theme-color);
      background-color: $theme-color;

      &.ui-tag--solid {
        background-color: $theme-color;

        .ui-tag__icon,
        .ui-tag__label {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-tag-variable($label, $color);
  }

  @each $label, $color in $base-colors {
    @include make-tag($label, $color);
  }

  @each $label, $color in $color-list {
    @include make-tag($label, $color);
  }
}
