@use './variables' as *;
@use './global' as *;

@mixin btn(
  $height: var(--btn-height),
  $border-radius: var(--btn-border-radius),
  $padding-left: var(--btn-padding),
  $padding-right: var(--btn-padding),
  $font-size: var(--btn-font-size),
) {
  height: $height;
  border-radius: $border-radius;
  padding-left: $padding-left;
  padding-right: $padding-right;
  font-size: $font-size;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
  white-space: nowrap;
  outline: 0;
  user-select: none;
  transition: background-color .2s ease-out;

  &:focus {
    background-color: var(--md-sys-color-primary-container);
  }
}

@mixin btn-filled {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);

  &:hover,
  &:focus {
    color: var(--md-sys-color-on-primary);
  }

  &:hover {
    @extend .z-depth-1;
    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
  }

  &:focus {
    @extend .z-depth-0;
    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
  }

  @include focus-visible();
}

@mixin btn-tonal {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);

  &:hover,
  &:focus {
    color: var(--md-sys-color-on-secondary-container);
  }

  &:hover {
    @extend .z-depth-1;
    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
  }

  &:focus {
    @extend .z-depth-0;
    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
  }

  @include focus-visible();
}

@mixin btn-elevated {
  //color: var(--md-sys-color-on-secondary-container);
  //background-color: var(--md-sys-color-secondary-container);
  @extend .z-depth-1;

  &:hover,
  &:focus {
    //color: var(--md-sys-color-primary);
  }

  &:hover {
    @extend .z-depth-2;
    //background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
  }

  &:focus {
    @extend .z-depth-1;
    //background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
  }

  @include focus-visible();
}

@mixin btn-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);

  &:hover,
  &:focus {
    color: var(--md-sys-color-primary);
  }

  &:hover {
    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
  }

  &:focus {
    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
    border: 1px solid var(--md-sys-color-primary);
  }

  &.disabled {
    background-color: unset;
    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  }

  @include focus-visible();
}

@mixin btn-flat {
  @extend .z-depth-0;
  color: var(--md-sys-color-primary);
  background-color: transparent;

  &:hover,
  &:focus {
    color: var(--md-sys-color-primary);
  }

  &:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
  }

  &:focus {
    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
  }

  &.disabled {
    background-color: unset;
  }

  @include focus-visible();
}

@mixin btn-disabled {
  @extend .z-depth-0;
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
  pointer-events: none;
  box-shadow: none;
  cursor: default;
}

// Focus with Keyboard
@mixin focus-visible {
  &:focus-visible {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
  }
}