@use 'src/styles/colors';
@use 'src/styles/shadows';
@use 'src/styles/fonts';
@use 'src/styles/variables' as vars;

@mixin button($background-color: colors.$blue-light) {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px 0;

  border: none;
  outline: 0 none;
  background-color: $background-color;
  border-radius: vars.$border-radius;

  &:focus {
    box-shadow: 0 0 0 0.2em colors.$focus-shadow;
  }
}

@mixin input {
  display: flex;
  align-items: center;

  @include shadows.control-border-shadow();

  height: vars.$standard-button-height;
  padding: 0 vars.$space-l;
  font-size: fonts.$font-size-l;
  font-weight: fonts.$font-regular;
  color: colors.$text-color;
  transition-duration: 0.2s;
  @include fonts.font-overflow();

  &:enabled:hover:not(.ui-state-error) {
    border-color: colors.$blue-light;
  }

  &:enabled:focus:not(.ui-state-error) {
    box-shadow: 0 0 0 0.2em colors.$focus-shadow;
    border-color: colors.$blue-light;
  }
}
