/* CSS for Button  */

/* temporary, pre primitives release */
:root {
  --duration-fast: 80ms;
  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
}

/* base button */
.Button {
  position: relative;
  font-size: var(--text-body-size-medium);
  font-weight: var(--base-text-weight-medium);
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--borderWidth-thin) solid;
  border-color: transparent;
  border-radius: var(--borderRadius-medium);
  color: var(--button-default-fgColor-rest);
  transition: var(--duration-fast) var(--easing-easeInOut);
  transition-property: color, fill, background-color, border-color;
  text-align: center;
  height: var(--control-medium-size);
  padding: 0 var(--control-medium-paddingInline-normal);
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--base-size-4);
  min-width: max-content;

  /* mobile friendly sizing */
  @media (pointer: coarse) {
    &::before {
      @mixin minTouchTarget 48px, 48px;
    }
  }

  /* base states */

  &:hover {
    transition-duration: var(--duration-fast);
  }

  &:active {
    transition: none;
  }

  &:disabled {
    cursor: not-allowed;
    box-shadow: none;
  }

  &[aria-disabled='true'] {
    cursor: default;
    box-shadow: none;
  }
}

.Button-withTooltip {
  position: relative;
  display: inline-block;
}

a.Button,
summary.Button {
  &:hover {
    text-decoration: none;
  }
}

/* wrap grid content to allow trailingAction to lock-right */
.Button-content {
  flex: 1 0 auto;
  display: grid;
  grid-template-areas: 'leadingVisual text trailingVisual';
  grid-template-columns: min-content minmax(0, auto) min-content;
  align-items: center;
  place-content: center;

  /* padding-bottom: 1px; optical alignment for firefox */

  & > :not(:last-child) {
    margin-right: var(--control-medium-gap);
  }
}

/* center child elements for fullWidth */
.Button-content--alignStart {
  justify-content: start;
}

/* button child elements */

/* align svg */
.Button-visual {
  display: flex;
  pointer-events: none; /* allow click handler to work, avoiding visuals */

  & .Counter {
    color: inherit;
    background-color: var(--buttonCounter-default-bgColor-rest);
  }
}

.Button-label {
  grid-area: text;
  white-space: nowrap;
  line-height: var(--text-body-lineHeight-medium);
}

.Button-leadingVisual {
  grid-area: leadingVisual;
}

.Button-leadingVisual svg {
  fill: currentcolor;
}

.Button-trailingVisual {
  grid-area: trailingVisual;
}

.Button-trailingAction {
  margin-right: calc(var(--base-size-4) * -1);
}

/* sizes */

.Button--small {
  font-size: var(--text-body-size-small);
  height: var(--control-small-size);
  padding: 0 var(--control-small-paddingInline-condensed);
  gap: var(--control-small-gap);

  & .Button-label {
    line-height: var(--text-body-lineHeight-small);
  }

  & .Button-content {
    & > :not(:last-child) {
      margin-right: var(--control-small-gap);
    }
  }
}

.Button--large {
  height: var(--control-large-size);
  padding: 0 var(--control-large-paddingInline-spacious);
  gap: var(--control-large-gap);

  & .Button-label {
    line-height: var(--text-body-lineHeight-large);
  }

  & .Button-content {
    & > :not(:last-child) {
      margin-right: var(--control-large-gap);
    }
  }
}

.Button--fullWidth {
  width: 100%;
}

/* variants */

/* primary */
.Button--primary {
  color: var(--button-primary-fgColor-rest);
  fill: var(--button-primary-iconColor-rest);
  background-color: var(--button-primary-bgColor-rest);
  border-color: var(--button-primary-borderColor-rest);
  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));

  &:hover:not(:disabled) {
    background-color: var(--button-primary-bgColor-hover);
    border-color: var(--button-primary-borderColor-hover);
  }

  /* fallback :focus state */
  &:focus {
    @mixin focusOutlineOnEmphasis;

    /* remove fallback :focus if :focus-visible is supported */
    &:not(:focus-visible) {
      outline: solid 1px transparent;
      box-shadow: none;
    }
  }

  /* default focus state */
  &:focus-visible {
    @mixin focusOutlineOnEmphasis;
  }

  &:active:not(:disabled),
  &[aria-pressed='true'] {
    background-color: var(--button-primary-bgColor-active);
    box-shadow: var(--button-primary-shadow-selected);
  }

  &:disabled,
  &[aria-disabled='true'] {
    color: var(--button-primary-fgColor-disabled);
    background-color: var(--button-primary-bgColor-disabled);
    border-color: var(--button-primary-borderColor-disabled);
    fill: var(--button-primary-fgColor-disabled);
  }

  & .Counter {
    color: inherit;
    background-color: var(--buttonCounter-primary-bgColor-rest);
  }
}

/* default (secondary) */
.Button--secondary {
  color: var(--button-default-fgColor-rest);
  fill: var(--fgColor-muted); /* help this */
  background-color: var(--button-default-bgColor-rest);
  border-color: var(--button-default-borderColor-rest);
  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);

  &:hover:not(:disabled) {
    background-color: var(--button-default-bgColor-hover);
    border-color: var(--button-default-borderColor-hover);
  }

  &:active:not(:disabled) {
    background-color: var(--button-default-bgColor-active);
    border-color: var(--button-default-borderColor-active);
  }

  &[aria-pressed='true'] {
    background-color: var(--button-default-bgColor-selected);
    box-shadow: var(--shadow-inset);
  }

  &:disabled,
  &[aria-disabled='true'] {
    color: var(--control-fgColor-disabled);
    background-color: var(--button-default-bgColor-disabled);
    border-color: var(--button-default-borderColor-disabled);
    fill: var(--control-fgColor-disabled);
  }
}

.Button--invisible {
  color: var(--button-default-fgColor-rest);

  &.Button--iconOnly {
    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
  }

  &:hover:not(:disabled) {
    background-color: var(--button-invisible-bgColor-hover);

    & .Button-visual {
      color: var(--button-invisible-iconColor-hover, var(--color-fg-default));
    }
  }

  &[aria-pressed='true'],
  &:active:not(:disabled) {
    background-color: var(--button-invisible-bgColor-active);
  }

  &:disabled,
  &[aria-disabled='true'] {
    color: var(--button-invisible-fgColor-disabled);
    background-color: var(--button-invisible-bgColor-disabled);
    border-color: var(--button-invisible-borderColor-disabled);
    fill: var(--button-invisible-fgColor-disabled);
  }

  /* if button has no visuals, use link blue for text */
  &.Button--invisible-noVisuals .Button-label {
    color: var(--button-invisible-fgColor-rest);
  }

  & .Button-visual {
    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));

    & .Counter {
      color: var(--fgColor-default);
    }
  }
}

.Button--link {
  color: var(--fgColor-link);
  fill: var(--fgColor-link);
  display: inline-block;
  font-size: inherit;
  border: none;
  height: unset;
  padding: 0;

  &:hover:not(:disabled) {
    text-decoration: underline;
  }

  &:focus-visible,
  &:focus {
    outline-offset: 2px;
  }

  &:disabled,
  &[aria-disabled='true'] {
    color: var(--control-fgColor-disabled);
    background-color: transparent;
    border-color: transparent;
    fill: var(--control-fgColor-disabled);
  }
}

/* danger */
.Button--danger {
  color: var(--button-danger-fgColor-rest);
  fill: var(--button-danger-iconColor-rest);
  background-color: var(--button-danger-bgColor-rest);
  border-color: var(--button-danger-borderColor-rest);
  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);

  &:hover:not(:disabled) {
    color: var(--button-danger-fgColor-hover);
    fill: var(--button-danger-fgColor-hover);
    background-color: var(--button-danger-bgColor-hover);
    border-color: var(--button-danger-borderColor-hover);
    box-shadow: var(--shadow-resting-small);

    & .Counter {
      color: var(--buttonCounter-danger-fgColor-hover);
      background-color: var(--buttonCounter-danger-bgColor-hover);
    }
  }

  &:active:not(:disabled),
  &[aria-pressed='true'] {
    color: var(--button-danger-fgColor-active);
    fill: var(--button-danger-fgColor-active);
    background-color: var(--button-danger-bgColor-active);
    border-color: var(--button-danger-borderColor-active);
    box-shadow: var(--button-danger-shadow-selected);
  }

  &:disabled,
  &[aria-disabled='true'] {
    color: var(--button-danger-fgColor-disabled);
    fill: var(--button-danger-fgColor-disabled);
    background-color: var(--button-danger-bgColor-disabled);
    border-color: var(--button-default-borderColor-disabled);

    & .Counter {
      color: var(--buttonCounter-danger-fgColor-disabled);
      background-color: var(--buttonCounter-danger-bgColor-disabled);
    }
  }

  & .Counter {
    color: var(--buttonCounter-danger-fgColor-rest);
    background-color: var(--buttonCounter-danger-bgColor-rest);
  }
}

.Button--iconOnly {
  display: inline-grid;
  place-content: center;
  padding: unset;
  width: var(--control-medium-size);

  &.Button--small {
    width: var(--control-small-size);
  }

  &.Button--large {
    width: var(--control-large-size);
  }
}