@use '../../theme/styles' as theme;

.wr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wr-btn-gap);
  vertical-align: middle;
  position: relative;

  appearance: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  white-space: nowrap;

  // Defaults — modifiers override
  --wr-btn-color: var(--wr-color-dark);
  --wr-btn-bg: var(--wr-color-white);
  --wr-btn-border: var(--wr-color-light);
  --wr-btn-radius: var(--wr-control-radius-md);
  --wr-btn-gap: 0.375rem;
  --wr-btn-padding-y: var(--wr-control-padding-y-md);
  --wr-btn-padding-x: 0.875rem; // 14px — buttons sit a touch wider than input/select
  --wr-btn-font-size: var(--wr-control-font-size-md);
  --wr-btn-font-weight: 500;
  --wr-btn-line-height: var(--wr-control-line-height-md);
  --wr-btn-icon-size: 1rem;

  color: var(--wr-btn-color);
  background: var(--wr-btn-bg);
  border: 1px solid var(--wr-btn-border);
  @include theme.smooth-br(var(--wr-btn-radius));
  padding: calc(var(--wr-btn-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-btn-padding-x) * var(--wr-density-x, 1));
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-btn-font-size);
  font-weight: var(--wr-btn-font-weight);
  line-height: var(--wr-btn-line-height);
  transition: var(--wr-transition-base);

  &:hover {
    --wr-btn-bg: var(--wr-color-hover);
  }

  &:active {
    --wr-btn-bg: rgba(var(--wr-color-light-rgb), 0.6);
  }

  &[disabled],
  &:disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.6;
  }

  &__icon {
    --wr-icon-size: var(--wr-btn-icon-size);
    color: inherit;
    flex: 0 0 auto;
  }

  &__spin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  &__label {
    flex: 0 1 auto;
    min-width: 0;
  }

  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px) so button,
  // input and select line up in a row. Buttons keep a slightly wider padding-x
  // (12 / 14 / 18) than input/select; gap + icon step with the size.
  &--sm {
    --wr-btn-radius: var(--wr-control-radius-sm);
    --wr-btn-gap: 0.25rem;
    --wr-btn-padding-y: var(--wr-control-padding-y-sm);
    --wr-btn-padding-x: 0.75rem; // 12px
    --wr-btn-font-size: var(--wr-control-font-size-sm);
    --wr-btn-line-height: var(--wr-control-line-height-sm);
    --wr-btn-icon-size: 0.875rem; // 14px
  }

  &--lg {
    --wr-btn-radius: var(--wr-control-radius-lg);
    --wr-btn-gap: 0.5rem;
    --wr-btn-padding-y: var(--wr-control-padding-y-lg);
    --wr-btn-padding-x: 1.125rem; // 18px
    --wr-btn-font-size: var(--wr-control-font-size-lg);
    --wr-btn-line-height: var(--wr-control-line-height-lg);
    --wr-btn-icon-size: 1.125rem; // 18px
  }

  // Shape — `rounded` (default) inherits --wr-btn-radius from the base
  // declaration above. Pill = fully rounded ends.
  //
  // `corner-shape: round` overrides the squircle from `smooth-br` —
  // squircle math doesn't degenerate to a pill at huge radii (it draws
  // a different shape), so we explicitly opt back to the round arc here.
  // Browsers without `corner-shape` support harmlessly ignore the
  // property.
  &--pill {
    --wr-btn-radius: var(--wr-border-radius-pill);
    corner-shape: round;
  }

  // Squircle — bumps the base radius so the iOS-style smooth corners
  // read more clearly. `smooth-br` from the host already opts into
  // `corner-shape: squircle` where supported; the modifier just picks a
  // larger anchor radius.
  &--squircle {
    --wr-btn-radius: var(--wr-border-radius-base);
  }

  // Layout
  &--block {
    display: flex;
    width: 100%;
  }

  // Icon position
  &--icon-end {
    flex-direction: row-reverse;
  }

  // Loading — hide label/icon contents but keep their footprint
  &--loading {
    .wr-btn__label,
    .wr-btn__icon {
      visibility: hidden;
    }
  }

  // Color variants
  @each $name in theme.$colors {
    &--#{$name} {
      --wr-btn-color: var(--wr-color-#{$name}-contrast);
      --wr-btn-bg: var(--wr-color-#{$name});
      --wr-btn-border: var(--wr-color-#{$name});

      &:hover {
        --wr-btn-bg: var(--wr-color-#{$name}-dark);
        --wr-btn-border: var(--wr-color-#{$name}-dark);
      }

      &:active {
        --wr-btn-bg: var(--wr-color-#{$name}-darker);
        --wr-btn-border: var(--wr-color-#{$name}-darker);
      }

      &.wr-btn--outlined {
        --wr-btn-color: var(--wr-color-#{$name});
        --wr-btn-bg: transparent;
        --wr-btn-border: rgba(var(--wr-color-#{$name}-rgb), 0.4);

        &:hover {
          --wr-btn-color: var(--wr-color-#{$name}-contrast);
          --wr-btn-bg: var(--wr-color-#{$name}-dark);
          --wr-btn-border: var(--wr-color-#{$name}-dark);
        }

        &:active {
          --wr-btn-color: var(--wr-color-#{$name}-contrast);
          --wr-btn-bg: var(--wr-color-#{$name}-darker);
          --wr-btn-border: var(--wr-color-#{$name}-darker);
        }
      }
    }
  }
}

.wr-btn-group {
  display: inline-flex;
  vertical-align: middle;

  > .wr-btn {
    border-radius: 0;
    margin-left: -1px;

    &:first-child {
      margin-left: 0;
      border-top-left-radius: var(--wr-btn-radius);
      border-bottom-left-radius: var(--wr-btn-radius);
    }

    &:last-child {
      border-top-right-radius: var(--wr-btn-radius);
      border-bottom-right-radius: var(--wr-btn-radius);
    }

    &:hover,
    &:focus-visible,
    &:active {
      z-index: 1;
    }
  }

  // Solid colored segments share border and background color, so adjacent
  // buttons fuse into one slab — draw a subtle divider on the right edge of
  // every non-last segment. Outlined/default variants keep their own visible
  // borders. On hover/focus the segment raises its own border (z-index above
  // neighbours), which would otherwise double-paint that edge — so drop the
  // seam there and let the raised border own it cleanly.
  @each $name in theme.$colors {
    > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:last-child) {
      box-shadow: inset -1px 0 0 rgba(var(--wr-color-black-rgb), 0.2);

      &:hover,
      &:focus-visible {
        box-shadow: none;
      }
    }
  }
}