/**
 * @file
 * Extra button styles.
 */

.button--external {
  gap: 8px;

  /* Only show external icon if href starts with "http" */
  &:where([href^="http"i]):after {
    content: "";
    width: 15px;
    height: 15px;
    margin-top: -0.2lh;
    -webkit-mask-image: url('../../images/external.svg');
    mask-image: url('../../images/external.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: currentColor;

    @media (forced-colors: active) {
      background: buttonText;
    }
  }
}

.button--link[class] {
  border: 0;
  padding: 0;

  &:hover {
    border: 0;
  }
}

.button {
  --border-radius: 12px;
  height: unset;
  padding-block: 16px;
  padding-inline: 24px;
  transition: all .3s ease;
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;

  &:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
  }

  &:last-child {
    margin-inline-end: 0;
  }

  &.disabled,
  &:disabled {
    background-color: var(--color-inactive);
    color: var(--color-white);
    border-color: var(--color-inactive);
  }

  &:focus {
    outline: 2px solid var(--color-primary);
    color: var(--color-primary);
  }
}

.button--small {
  padding: 8px 16px;
  font-size: 16px;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-white);

  &:hover:not(.disabled):not(:disabled) {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
  }

  &:focus {
    color: var(--color-white);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
}

.button--green {
  background-color: var(--color-accent-complete);
  border-color: var(--color-accent-complete);

  &:hover {
    background-color: var(--color-table-bg);
    border-color: var(--color-white);
  }

  &:focus {
    background-color: var(--color-accent-complete);
    outline: 2px solid var(--color--gold);
    color: var(--color-primary);
  }
}

.button--border-green {
  background-color: transparent;
  color: var(--color-accent-complete);
  border-color: var(--color-accent-complete);

  &:hover {
    background-color: transparent;
    color: var(--color-accent-complete);
    border-color: var(--color-accent-complete);
  }

  &:focus {
    background-color: var(--color-accent-complete);
    outline: 2px solid var(--color--gold);
    color: var(--color-primary);
  }
}