/**
 * @file action.css
 * @component Action (Content)
 * @description Styles standalone destination links without imitating Form API controls.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_color-background        : Resting background color.
 * --_color-backgroundActive  : Hover and active background color.
 * --_color-border            : Resting border color.
 * --_color-borderActive      : Hover and active border color.
 * --_color-focusRing         : Focus outline color.
 * --_color-focusRingContrast : Focus halo color.
 * --_color-text              : Resting foreground color.
 * --_color-textActive        : Hover and active foreground color.
 * --_fontSize-label          : Size-specific label font size.
 * --_length-target           : Size-specific minimum target size.
 * --_length-border           : Variant-specific border width.
 * --_number-arrowDirection   : Arrow link direction; -1 mirrors it in right-to-left text.
 * --_space-block             : Size-specific block padding.
 * --_space-gap               : Size-specific label/icon gap.
 * --_space-inline            : Size- and variant-specific inline padding.
 * --_textDecoration-label    : Resting label decoration.
 */
:where([data-component-id="marsal_sdc:action"]) {
  --_color-background: var(--marsal-color-surfaceInteractive);
  --_color-backgroundActive: var(--marsal-color-surfaceBrand);
  --_color-border: var(--marsal-color-borderInteractive);
  --_color-borderActive: var(--marsal-color-surfaceBrand);
  --_color-focusRing: var(--marsal-color-focusRing);
  --_color-focusRingContrast: var(--marsal-color-focusRingContrast);
  --_color-text: var(--marsal-color-textOnInteractive);
  --_color-textActive: var(--marsal-color-textOnInteractive);
  --_fontSize-label: var(--marsal-fontSize-label-standard);
  --_length-target: 3rem;
  --_length-border: 2px;
  --_number-arrowDirection: 1;
  --_space-block: var(--marsal-space-3xs);
  --_space-gap: var(--marsal-space-2xs);
  --_space-inline: var(--marsal-space-s);
  --_textDecoration-label: none;

  display: inline-flex;
  gap: var(--_space-gap);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: max(44px, var(--_length-target));
  min-inline-size: max(44px, var(--_length-target));
  max-inline-size: 100%;
  padding: var(--_space-block) var(--_space-inline);
  border: var(--_length-border) solid var(--_color-border);
  border-radius: 0;
  color: var(--_color-text);
  background-color: var(--_color-background);
  font-family: var(--marsal-fontFamily-label-standard);
  font-size: var(--_fontSize-label);
  font-weight: var(--marsal-fontWeight-label-standard);
  line-height: var(--marsal-lineHeight-label-standard);
  letter-spacing: var(--marsal-letterSpacing-label-standard);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

:where([data-component-id="marsal_sdc:action"]:dir(rtl)) {
  --_number-arrowDirection: -1;
}

:where([data-component-id="marsal_sdc:action"]) {
  &[data-size="small"] {
    --_fontSize-label: var(--marsal-fontSize-label-small);
    --_length-target: 2.75rem;
    --_space-block: var(--marsal-space-4xs);
    --_space-gap: var(--marsal-space-3xs);
    --_space-inline: var(--marsal-space-xs);
  }

  &[data-size="large"] {
    --_fontSize-label: var(--marsal-fontSize-label-large);
    --_length-target: 3.5rem;
    --_space-block: var(--marsal-space-2xs);
    --_space-gap: var(--marsal-space-xs);
    --_space-inline: var(--marsal-space-m);
  }

  &[data-component-variant="secondary"] {
    --_color-background: transparent;
    --_color-backgroundActive: var(--marsal-color-surfaceInteractive);
    --_color-border: var(--marsal-color-borderInteractive);
    --_color-borderActive: var(--marsal-color-borderInteractive);
    --_color-text: var(--marsal-color-link);
    --_color-textActive: var(--marsal-color-textOnInteractive);
  }

  /* A fixed on-brand pair: white outline and text; hover fills white and the text takes the brand navy. */
  &[data-component-variant="secondary_on_brand"] {
    --_color-background: transparent;
    --_color-backgroundActive: var(--marsal-color-linkOnBrand);
    --_color-border: var(--marsal-color-linkOnBrand);
    --_color-borderActive: var(--marsal-color-linkOnBrand);
    --_color-focusRing: var(--marsal-color-focusRingOnDark);
    --_color-focusRingContrast: var(--marsal-color-focusRingContrastOnDark);
    --_color-text: var(--marsal-color-linkOnBrand);
    --_color-textActive: var(--marsal-color-surfaceBrand);
  }

  &[data-component-variant="accent"] {
    --_color-background: var(--marsal-color-surfaceAccent);
    --_color-backgroundActive: var(--marsal-color-surfaceInteractive);
    --_color-border: var(--marsal-color-borderAccent);
    --_color-borderActive: var(--marsal-color-borderInteractive);
    --_color-text: var(--marsal-color-textOnAccent);
    --_color-textActive: var(--marsal-color-textOnInteractive);
  }

  &:is(
    [data-component-variant="text"],
    [data-component-variant="text_on_brand"],
    [data-component-variant="arrow"]
  ) {
    --_color-background: transparent;
    --_color-backgroundActive: transparent;
    --_color-border: transparent;
    --_color-borderActive: transparent;
    --_color-textActive: var(--_color-text);
    --_length-border: 0;
    --_space-inline: 0;
    --_textDecoration-label: underline;
  }

  /* Text links read like prose: start-aligned when they wrap. An arrow link stays centered in a stretched button row. */
  &:is(
    [data-component-variant="text"],
    [data-component-variant="text_on_brand"]
  ) {
    justify-content: start;
    text-align: start;
  }

  &:is(
    [data-component-variant="text"],
    [data-component-variant="arrow"]
  ) {
    --_color-text: var(--marsal-color-link);
  }

  &[data-component-variant="text_on_brand"] {
    --_color-text: var(--marsal-color-linkOnBrand);
  }

  /* The arrow is drawn in the link's own color, never typed into the label. */
  &[data-component-variant="arrow"]::after {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    scale: var(--_number-arrowDirection) 1;
  }

  & > .marsal-action__label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-decoration-line: var(--_textDecoration-label);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
  }

  & > :where(
    .marsal-action__leading-icon,
    .marsal-action__trailing-icon
  ) {
    display: inline-flex;
    flex: none;
    align-items: center;
  }

  @media (hover: hover) {
    &:hover {
      border-color: var(--_color-borderActive);
      color: var(--_color-textActive);
      background-color: var(--_color-backgroundActive);

      & > .marsal-action__label {
        text-decoration-line: underline;
        text-decoration-thickness: 0.12em;
      }
    }
  }

  &:active {
    border-color: var(--_color-borderActive);
    color: var(--_color-textActive);
    background-color: var(--_color-backgroundActive);

    /* A pressed arrow link keeps the underline it has at rest or on hover. */
    &:not([data-component-variant="arrow"]) > .marsal-action__label {
      text-decoration-line: underline;
      text-decoration-thickness: 0.16em;
    }
  }
}

/* @todo WORKAROUND: behavioursoe base.css:440-446,458 sets a:link/a:visited/a:active color and base.css:448-469 sets hover/focus borders; delete when the theme is fixed. */
[data-component-id="marsal_sdc:action"]:is(:link, :visited) {
  color: var(--_color-text);
  border-bottom: var(--_length-border) solid var(--_color-border);
}

@media (hover: hover) {
  /* @todo WORKAROUND: behavioursoe base.css:440-458 sets a:link/a:visited hover color and base.css:448-452 adds a hover border; delete when the theme is fixed. */
  [data-component-id="marsal_sdc:action"]:is(:link, :visited):hover {
    color: var(--_color-textActive);
    border-bottom-color: var(--_color-borderActive);
  }
}

/* @todo WORKAROUND: behavioursoe base.css:458 sets a:active link color; delete when the theme is fixed. */
[data-component-id="marsal_sdc:action"]:is(:link, :visited):active {
  color: var(--_color-textActive);
  border-bottom-color: var(--_color-borderActive);
}

/* An arrow link keeps its resting underline on focus; its focus ring marks it. */
:where([data-component-id="marsal_sdc:action"]):is([data-component-variant="text"], [data-component-variant="text_on_brand"]):focus > .marsal-action__label {
  text-decoration-thickness: 0.12em;
}

/* @todo WORKAROUND: behavioursoe base.css:435-438 gives every link a color transition, even when motion is reduced; delete when the theme is fixed. */
[data-component-id="marsal_sdc:action"] {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* @todo WORKAROUND: behavioursoe base.css:435-438 overrides the link transition; delete when the theme is fixed. */
  [data-component-id="marsal_sdc:action"] {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }

  :where([data-component-id="marsal_sdc:action"])[data-component-variant="arrow"] {
    &::after {
      transition: translate 150ms ease;
    }

    /* The arrow nudges toward its destination only when motion is allowed. */
    &:hover::after {
      translate: calc(var(--_number-arrowDirection) * 0.25rem) 0;
    }
  }
}

:where([data-component-id="marsal_sdc:action"]) {
  &:focus-visible {
    outline: 3px solid var(--_color-focusRing);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--_color-focusRingContrast);
  }

  @media (forced-colors: active) {
    --_color-border: ButtonText;
    --_color-borderActive: ButtonText;

    border-color: ButtonText;

    &:is(
      [data-component-variant="text"],
      [data-component-variant="text_on_brand"],
      [data-component-variant="arrow"]
    ) {
      --_color-border: transparent;
      --_color-borderActive: transparent;

      border-color: transparent;
    }

    /* Forced colors repaint backgrounds, so the drawn arrow takes the link color explicitly. */
    &[data-component-variant="arrow"]::after {
      forced-color-adjust: none;
      background-color: LinkText;
    }

    &:focus-visible {
      outline-color: Highlight;
      box-shadow: none;
    }
  }
}