@use "vars" as *;
@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/rtl" as *;

@mixin button-base {
  @include reset;
  @include font-family("sans");
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  flex-shrink: 0;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  height: $button-height;
  padding: $button-padding;
  border-radius: $button-border-radius;
  text-align: center;
  text-decoration: none;
  transition-duration: $transition--base;
  transition-timing-function: ease-in;
  white-space: nowrap;
  line-height: 16px;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .#{$prefix}--btn__icon {
    //width: calcRem(16px);
    //height: calcRem(16px);
    margin-left: 0.5em;
    @include rtl {
      margin-left: initial;
      margin-right: 0.5em;
    }
    // transition-duration: $transition--base;
    // transition-timing-function: ease-in;
  }
}

@mixin button-theme(
  $bg-color,
  $border-color,
  $font-color,
  $hover-bg-color,
  $icon-color
) {
  background-color: $bg-color;
  border-width: $button-border-width;
  border-style: solid;
  border-color: $border-color;

  color: $font-color;

  // TODO: Check if link override is still needed
  &[role="button"] {
    color: $font-color;
  }
  /* @at-root a {
    color: $font-color !important;
  } */
  &:focus,
  &:hover {
    background-color: $hover-bg-color;
  }

  &:focus {
    outline: none;
  }

  &:disabled:hover,
  &:disabled:focus {
    background-color: $bg-color;
  }

  &:active {
    //background-color: darken($bg-color, 20%);
  }

  .#{$prefix}--btn__icon {
    fill: $icon-color;
  }
}