md-shortcut-button {
  display: block;
}

/* The border is transparent in primary so that both variants measure the same.
   background-origin keeps the gradient under the border instead of repeating it there.
   isolation keeps the hover gradient layer (::before) above the background and below the content.
   The 300ms ease-out comes from the a3w-navigation-button it replaced. */
.md-shortcut-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--md-spacing-mn);
  width: 100%;
  height: 100%;
  padding: var(--md-spacing-sm);
  border: var(--md-border-width-sm) solid transparent;
  border-radius: var(--md-radius-xs);
  background-origin: border-box;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out;
}

/* The link states repeat the colour and decoration: the global a:hover and a:focus are more specific */
.md-shortcut-btn:hover,
.md-shortcut-btn:focus {
  text-decoration: none;
}

.md-shortcut-btn__label {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* The icon container also has a border, transparent in primary, for the same reason */
.md-shortcut-btn__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--md-spacing-3xs);
  background-color: var(--md-background-primary);
  border: var(--md-border-width-sm) solid transparent;
}

/* 32px: the icon slot size mn in the DS. There is no icon size token in code yet. */
.md-shortcut-btn__icon > .fmd {
  display: flex;
  font-size: 32px;
  line-height: 1;
}

/* icon position */

.md-shortcut-btn--icon-right .md-shortcut-btn__icon {
  border-radius: var(--md-radius-full);
}

.md-shortcut-btn--icon-left {
  flex-direction: row-reverse;
}

.md-shortcut-btn--icon-left .md-shortcut-btn__icon {
  aspect-ratio: 1;
  border-radius: var(--md-radius-xs);
}

/* variant - primary.
   The gradients are the paint styles brand-gradient-left and brand-gradient-right in Foundations:
   the suffix is the side of the dark end. At rest the dark end sits under the white label
   (6.68:1); on hover it swaps to the other side. Two gradients cannot be interpolated, so the
   hover one sits in a layer (::before) that fades in. */

.md-shortcut-btn--primary,
.md-shortcut-btn--primary:hover,
.md-shortcut-btn--primary:focus {
  color: var(--md-content-primary-inverse);
}

.md-shortcut-btn--primary.md-shortcut-btn--icon-right {
  background: linear-gradient(104deg, var(--md-gradient-brand-primary) 0%, var(--md-gradient-brand-secondary) 100%);
}

.md-shortcut-btn--primary.md-shortcut-btn--icon-right::before {
  background: linear-gradient(259deg, var(--md-gradient-brand-primary) 5%, var(--md-gradient-brand-secondary) 100%);
}

.md-shortcut-btn--primary.md-shortcut-btn--icon-right:active:not(.md-shortcut-btn--disabled) {
  background:
    linear-gradient(var(--md-overlay-dark-xs), var(--md-overlay-dark-xs)),
    linear-gradient(104deg, var(--md-gradient-brand-primary) 0%, var(--md-gradient-brand-secondary) 100%);
}

.md-shortcut-btn--primary.md-shortcut-btn--icon-left {
  background: linear-gradient(259deg, var(--md-gradient-brand-primary) 5%, var(--md-gradient-brand-secondary) 100%);
}

.md-shortcut-btn--primary.md-shortcut-btn--icon-left::before {
  background: linear-gradient(104deg, var(--md-gradient-brand-primary) 0%, var(--md-gradient-brand-secondary) 100%);
}

.md-shortcut-btn--primary.md-shortcut-btn--icon-left:active:not(.md-shortcut-btn--disabled) {
  background:
    linear-gradient(var(--md-overlay-dark-xs), var(--md-overlay-dark-xs)),
    linear-gradient(259deg, var(--md-gradient-brand-primary) 5%, var(--md-gradient-brand-secondary) 100%);
}

/* hover gradient layer, shared with selected. It also covers the transparent border. */
.md-shortcut-btn--primary::before,
.md-shortcut-btn--selected::before {
  content: '';
  position: absolute;
  inset: calc(var(--md-border-width-sm) * -1);
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}

.md-shortcut-btn--primary:hover:not(.md-shortcut-btn--disabled)::before,
.md-shortcut-btn--selected:hover:not(.md-shortcut-btn--disabled)::before {
  opacity: 1;
}

/* active goes back to the rest gradient with the overlay on top */
.md-shortcut-btn--primary:active:not(.md-shortcut-btn--disabled)::before {
  opacity: 0;
}

.md-shortcut-btn--primary .md-shortcut-btn__icon {
  color: var(--md-content-brand-primary);
}

/* variant - secondary */

.md-shortcut-btn--secondary,
.md-shortcut-btn--secondary:focus {
  color: var(--md-content-secondary);
  background-color: var(--md-background-primary);
  border-color: var(--md-border-primary);
}

.md-shortcut-btn--secondary:hover:not(.md-shortcut-btn--disabled) {
  color: var(--md-content-secondary);
  background-color: var(--md-background-hover);
  border-color: var(--md-border-secondary);
}

.md-shortcut-btn--secondary:active:not(.md-shortcut-btn--disabled) {
  color: var(--md-content-primary);
  background-color: var(--md-background-pressed);
  border-color: var(--md-border-tertiary);
}

.md-shortcut-btn--secondary .md-shortcut-btn__icon {
  border-color: var(--md-border-primary);
}

/* state - selected: only secondary with the icon on the left, the class is never added otherwise.
   It takes the primary look without changing size. Clicking it does nothing, so active keeps the
   hover look (the ::before layer stays visible). */

.md-shortcut-btn--selected,
.md-shortcut-btn--selected:focus,
.md-shortcut-btn--selected:hover:not(.md-shortcut-btn--disabled),
.md-shortcut-btn--selected:active:not(.md-shortcut-btn--disabled) {
  color: var(--md-content-primary-inverse);
  background: linear-gradient(259deg, var(--md-gradient-brand-primary) 5%, var(--md-gradient-brand-secondary) 100%);
  border-color: transparent;
}

.md-shortcut-btn--selected::before {
  background: linear-gradient(104deg, var(--md-gradient-brand-primary) 0%, var(--md-gradient-brand-secondary) 100%);
}

.md-shortcut-btn--selected .md-shortcut-btn__icon {
  color: var(--md-content-brand-primary);
}

/* The gradient disappears in forced colors mode, so the selected tab needs a real border */
@media (forced-colors: active) {
  .md-shortcut-btn--selected,
  .md-shortcut-btn--selected:hover:not(.md-shortcut-btn--disabled),
  .md-shortcut-btn--selected:active:not(.md-shortcut-btn--disabled) {
    border-color: Highlight;
  }
}

/* state - focus */

.md-shortcut-btn:focus-visible:not(.md-shortcut-btn--disabled) {
  outline: var(--md-border-width-sm) solid var(--md-border-focus);
  outline-offset: 2px;
}

/* state - disabled. A class instead of [disabled]: the link uses aria-disabled.
   Doubled class so it overrides the primary gradients, which combine two classes. */

.md-shortcut-btn.md-shortcut-btn--disabled,
.md-shortcut-btn.md-shortcut-btn--disabled:hover,
.md-shortcut-btn.md-shortcut-btn--disabled:focus {
  color: var(--md-content-disabled);
  background: var(--md-background-disabled);
  cursor: not-allowed;
}

.md-shortcut-btn--secondary.md-shortcut-btn--disabled {
  border-color: var(--md-border-disabled);
}

.md-shortcut-btn--disabled .md-shortcut-btn__icon {
  color: var(--md-content-disabled);
  border-color: var(--md-border-disabled);
}

/* Without motion the states change at once, as before */
@media (prefers-reduced-motion: reduce) {
  .md-shortcut-btn,
  .md-shortcut-btn::before {
    transition: none;
  }
}