@use '../../common/color.module.scss';

.Button {
  $size: 33px;

  color: color.$colorDefaultText;
  background: color.$colorDefaultBackground;
  border: 1px solid color.$colorDefaultText;
  cursor: pointer;
  border-radius: $size * 0.5;
  height: $size;
  line-height: $size;
  padding: 0 12px;
  display: inline-block;
  font-size: 14px;

  &.nowrap {
    white-space: nowrap;
  }

  &:hover {
    background: color.$colorDefaultAltBackground;
  }

  &.primary {
    &:hover {
      color: color.$colorRedText;
      border-color: color.$colorDefaultText;
      background: color.$colorRedAltBackground;
    }
  }

  &.red {
    color: color.$colorRedText;
    background: color.$colorRedBackground;
    border-color: color.$colorDefaultText;

    &:hover {
      background: color.$colorRedAltBackground;
    }
  }

  &.green {
    color: color.$colorGreenText;
    background: color.$colorGreenBackground;
    border-color: color.$colorGreenText;

    &:hover {
      background: color.$colorGreenAltBackground;
    }
  }

  &.disabled,
  &:disabled,
  &[disabled] {
    background: color.$colorDisabledBackground !important;
    color: color.$colorDisabledText !important;
    cursor: default;
  }

  &:focus {
    outline: none;
  }

  &.icon {
    background: none;
    border: 0;

    &.red {
      color: color.$colorRedBackground;

      &:hover {
        color: darken(color.$colorRedBackground, 10%);
      }
    }

    &:hover {
      color: darken(color.$colorDefaultText, 10%);
      background: none;
    }
  }

  &.small {
    $divider: 2 / 3;
    $size: $size * $divider;

    border-radius: $size * 0.5;
    height: $size;
    line-height: $size;
    padding: 0 12px * $divider;
    font-size: 14px * $divider;
  }
}