@use '../foundation/colors';

$height: 2em !default;
$min-width: 3em !default;
$margin: .3em .3em .3em 0 !default;
$padding: 0 1em !default;
$background: colors.$dark05 !default;
$background-hover: colors.$dark07 !default;
$background-active: colors.$dark06 !default;
$background-active-hover: colors.$main !default;
$color: colors.$light03 !default;
$color-hover: colors.$light03 !default;
$color-active: colors.$main !default;
$color-active-hover: colors.$dark06 !default;
$border: 1px solid transparent !default;
$border-focus: 1px solid colors.$light03 !default;
$border-radius: 3px !default;
$opacity-disabled: .5 !default;
$icon-size: 1.1em !default;
$transition: color .15s ease, background .15s ease !default;
$icon-button-width: $height !default;

.ryuseicode {
  &__button {
    align-items: center;
    background: $background;
    border: 0;
    border: $border;
    border-radius: $border-radius;
    box-sizing: border-box;
    color: $color;
    display: inline-flex;
    font-family: inherit;
    height: $height;
    justify-content: center;
    margin: $margin;
    min-width: $min-width;
    outline: 0;
    padding: $padding;
    transition: $transition;
    vertical-align: middle;

    &:not(:disabled) {
      cursor: pointer;

      &:not(.is-active):hover {
        background: $background-hover;
        color: $color-hover;
      }

      &.is-active:hover {
        background: $background-active-hover;
        color: $color-active-hover;
      }
    }

    &:focus {
      border: $border-focus;
    }

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

    &:last-child {
      margin-right: 0;
    }

    &.is-active {
      background: $background-active;
      color: $color-active;
    }

    &--icon {
      background: $background;
      min-width: initial;
      padding: 0;
      width: $icon-button-width;

      svg {
        height: $icon-size;
        width: $icon-size;
      }
    }
  }
}