@use '../../token/color/color' as color-color;
@use '../../token/font-family/font-family';
@use 'sass:color';

$tikui-button-border-width: 1px !default;
$tikui-button-padding: 19px !default;
$tikui-button-padding-small: 9px !default;
$tikui-button-min-width: 176px !default;
$tikui-button-min-width-small: 80px !default;
$tikui-button-line-height: 20px !default;
$tikui-button-line-height-small: 16px !default;
$tikui-button-font-size: 16px !default;
$tikui-button-font-size-small: 12px !default;
$tikui-button-radius: 30px !default;
$tikui-button-font-family: font-family.$tikui-font-family-main !default;
$tikui-button-color-background: color-color.$tikui-color-secondary !default;
$tikui-button-color-border: color-color.$tikui-color-secondary !default;
$tikui-button-color-text: color-color.$tikui-color-text-dark !default;
$tikui-button-focus-blur-radius: 5px !default;
$tikui-button-focus-color-shadow: color-color.$tikui-color-primary !default;
$tikui-button-hover-color-background: color.scale(
  $tikui-button-color-background,
  $lightness: -10%
) !default;
$tikui-button-secondary-color-background: color-color.$tikui-color-shade-100 !default;
$tikui-button-secondary-color-border: color-color.$tikui-color-secondary !default;
$tikui-button-secondary-color-text: color-color.$tikui-color-text-dark !default;
$tikui-button-secondary-hover-color-background: $tikui-button-color-background !default;

.tikui-button {
  box-sizing: border-box;
  display: inline-block;
  outline: none;
  border: $tikui-button-border-width solid $tikui-button-color-border;
  border-radius: $tikui-button-radius;
  background-color: $tikui-button-color-background;
  cursor: pointer;
  padding: $tikui-button-padding;
  min-width: $tikui-button-min-width;
  text-align: center;
  text-decoration: none;
  line-height: $tikui-button-line-height;
  color: $tikui-button-color-text;
  font-family: $tikui-button-font-family;
  font-size: $tikui-button-font-size;
  font-weight: bold;

  &:hover {
    background-color: $tikui-button-hover-color-background;
  }

  &:focus {
    box-shadow: 0 0 $tikui-button-focus-blur-radius $tikui-button-focus-color-shadow;
  }

  &.-secondary {
    border-color: $tikui-button-secondary-color-border;
    background-color: $tikui-button-secondary-color-background;
    color: $tikui-button-secondary-color-text;

    &:hover {
      background-color: $tikui-button-secondary-hover-color-background;
    }
  }

  &.-small {
    padding: $tikui-button-padding-small;
    min-width: $tikui-button-min-width-small;
    line-height: $tikui-button-line-height-small;
    font-size: $tikui-button-font-size-small;
  }
}