@use "../../../styles/spacing.scss";
@use "../../../styles/typography.scss";
@use "../../../styles/colors.scss";

.button {
  // Set up appropriately cascading fallbacks for custom colors
  $button-bg-color: var(--Button-bg, #{colors.$altblack-80});
  $button-fg-color: var(--Button-fg, white);
  $button-border-color: var(--Button-border, #{$button-bg-color});
  $button-active-bg-color: var(
    --Button-active-bg,
    #{colors.$altblack-100}
  );
  $button-active-fg-color: var(--Button-active-fg, white);
  $button-active-border-color: var(
    --Button-active-border,
    #{$button-active-bg-color}
  );
  $button-hover-bg-color: var(
    --Button-hover-bg,
    var(--Button-bg, #{colors.$altblack-70})
  );
  $button-hover-fg-color: var(--Button-hover-fg, #{$button-fg-color});
  $button-hover-border-color: var(
    --Button-hover-border,
    #{$button-hover-bg-color}
  );
  $button-disabled-bg-color: var(--Button-disabled-bg, #{colors.$gray-20});
  $button-disabled-fg-color: var(--Button-disabled-fg, white);
  $button-disabled-border-color: var(
    --Button-disabled-border,
    #{$button-disabled-bg-color}
  );

  display: inline-block;
  color: $button-fg-color;
  background-color: $button-bg-color;
  border-width: 2px;
  border-style: solid;
  border-color: $button-border-color;
  cursor: pointer;
  text-decoration: none;

  @include typography.sans($role: "label");

  &.sm {
    @include typography.sans($size: "200", $role: "label");
  }

  &.lg {
    @include typography.sans($size: "400", $role: "label");
  }

  &.active,
  &.active:hover {
    color: $button-active-fg-color;
    background-color: $button-active-bg-color;
    border-color: $button-active-border-color;
  }

  &[disabled],
  &[disabled]:hover {
    cursor: not-allowed;
    color: $button-disabled-fg-color;
    background-color: $button-disabled-bg-color;
    border-color: $button-disabled-border-color;
  }

  &:hover {
    color: $button-hover-fg-color;
    background-color: $button-hover-bg-color;
    border-color: $button-hover-border-color;
  }

  &.sharp {
    border-radius: 0;
  }

  &.hollow {
    // Custom colors cascade a little differently when hollow
    $button-hollow-fg: var(--Button-fg, #{colors.$altblack-80});
    $button-hollow-border: var(--Button-border, #{$button-hollow-fg});
    $button-hollow-hover-fg: var(
      --Button-hover-fg,
      var(--Button-fg, #{colors.$altblack-70})
    );
    $button-hollow-hover-border: var(
      --Button-hover-border,
      #{$button-hollow-hover-fg}
    );

    color: $button-hollow-fg;
    background-color: transparent;
    border-color: $button-hollow-border;

    &:hover {
      color: $button-hollow-hover-fg;
      background-color: transparent;
      border-color: $button-hollow-hover-border;
    }
  }
}

.content {
  display: flex;
  align-items: center;
}

.defaultPadding {
  padding: spacing.$spacing-3 spacing.$spacing-5;

  &.sm {
    padding: spacing.$spacing-2 spacing.$spacing-4;
  }

  &.lg {
    padding: spacing.$spacing-4 spacing.$spacing-6;
  }
}

.icon {
  width: 16px;
  aspect-ratio: 1;
  margin-right: spacing.$spacing-2;

  .sm > & {
    width: 12px;
    margin-right: spacing.$spacing-1;
  }

  .lg > & {
    width: 20px;
  }
}