/* buttons */

/* default */
.button {
  font-family: var(--font-sans);
  line-height: 1;
  font-weight: 400;
  color: var(--shw);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  min-width: 72px;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--crotchet);
  background-color: var(--mb);
  border: 1px solid var(--mb);
  padding: var(--crotchet) var(--minim);
  border-radius: var(--quaver);
  cursor: pointer;

  &:hover {
    background-color: var(--mb-lighter);
    border-color: var(--mb-lighter);
  }

  &:active {
    background-color: var(--mb-lightest);
    border-color: var(--mb-lightest);
    color: var(--shw);
  }
}

/* for use on dark background */
.button.dark {
  color: var(--mb);
  background-color: var(--shw);
  border: 1px solid var(--shw);

  &:hover {
    background-color: var(--grey-200);
    border-color: var(--grey-200);
  }

  &:active {
    background-color: var(--grey-400);
    border-color: var(--grey-400);
    color: var(--mb);
  }
}

/* other utility stuff */
@media only screen and (width < 640px) {
  .button {
    width: auto;
  }
}

.button.small {
  line-height: 1.1;
  padding: var(--quaver) var(--crotchet);
  text-transform: capitalize;
  letter-spacing: 0;
  min-width: auto;
}

.button.centered {
  margin: 0 auto;
}

.button.right {
  margin-left: auto;
}

/* soft variant */
.button.soft {
  border: none;
  background-color: var(--ib-soft-4);

  &:hover {
    background-color: var(--ib-soft-5);
  }

  &:active {
    background-color: var(--ib-soft-6);
  }

  &.dark {
    color: var(--shw);
    background-color: var(--ib-lighter);
  }

  &.dark:hover,
  &.dark:active {
    background-color: var(--ib);
  }
}

.button.outline {
  border: 1px solid var(--mb);
  color: var(--fg);
  background: none;

  &.bg {
    background: var(--bg);
  }

  &:hover {
    background-image: linear-gradient(var(--ib-soft-1));
  }

  &:active {
    background-image: linear-gradient(var(--ib-soft-3));
  }

  &.dark,
  &.dark-blue {
    border-color: var(--shw);
    color: var(--shw);
  }

  &.dark:hover {
    background-color: var(--grey-800);
  }
  
  &.dark:active {
    background-color: var(--grey-700);
  }

  &.dark-blue:hover,
  &.dark-blue:active {
    background-color: var(--ib-lighter)
  }

  &.danger {
    border-color: var(--status-red);
    color: var(--status-red);
  }

  &.danger:hover,
  &.dark.danger:hover {
    background-color: var(--status-red-soft-1);
  }

  &.danger:active,
  &.dark.danger:active {
    background-color: var(--status-red-soft-3);
  }
}

.button.text {
  border: none;
  background: none;
  color: var(--fg);

  &:hover {
    background-color: var(--ib-soft-1);
    text-decoration: none;
  }

  &:active {
    background-color: var(--ib-soft-3);
  }

  &.danger,
  &.dark.danger {
    color: var(--status-red);
  }

  &.danger:hover,
  &.dark.danger:hover {
    background-color: var(--status-red-soft-1);
  }

  &.danger:active,
  &.dark.danger:active {
    background-color: var(--status-red-soft-3);
  }

  &.dark {
    color: var(--shw);
  }

  &.dark:hover {
    background-color: var(--mb-lighter);
  }

  &.dark:active {
    background-color: var(--grey-800);
  }
}

.button-icon {
  width: 16px;
  height: 16px;
}

.button.dropdown {
  min-width: 0;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--gold);
  background: none;
  color: var(--fg);

  &:hover {
    background-color: var(--bg-darker);
  }
  &:active {
    background-color: var(--bg-lighter);
  }

  &.dark {
    color: var(--bg);
    &:hover {
      background-color: var(--fg-darker);
    }
    &:active {
      background-color: var(--fg-lighter);
    }
    &::after {
      border-color: var(--bg);
    }
  }

  &::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin-left: var(--crotchet);
    transform: rotate(45deg);
    border-right: 1px solid var(--fg);
    border-top: 1px solid var(--fg);
    transition: all 150ms ease-in-out;
  }

  &[aria-expanded="true"] {
    &::after {
      transform: rotate(135deg);
    }
  }
}

.button.disabled,
.button[disabled] {
  cursor: default;
  background-color: var(--grey-200);
  border-color: var(--grey-200);
  color: var(--grey-400);

  &:hover,
  &:active {
    background-color: var(--grey-200) !important;
    color: var(--grey-400);
    border-color: var(--grey-200);
  }

  &.dark {
    background-color: var(--mb-lighter);
    border-color: var(--mb-lighter);
    color: var(--grey-700);
  }

  &.dark:hover,
  &.dark:active {
    background-color: var(--mb-lighter) !important;
    border-color: var(--mb-lighter);
    color: var(--grey-700);
  }
}

.button[hidden=""] {
  display: none;
}

/* icon-button */
.icon-button {
  --size: 32px;
  height: var(--size);
  width: var(--size);
  border-radius: var(--quaver);
  background: none;
  color: var(--fg);
  border: none;
  cursor: pointer;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: var(--ib-soft-1);
  }
  &:active {
    background-color: var(--ib-soft-3);
  }

  &.dark {
    color: var(--shw);
  }
  &.dark:hover,
  &.dark:active {
    background-color: var(--fg-lighter);
  }
}

.icon-button svg {
  width: 100%;
  height: 100%;
}

/* big old cta button */
.button.cta {
  padding: var(--minim) var(--semibreve);
  border-radius: var(--crotchet);
  border: none;
  background: var(--ib-lighter);
  background: linear-gradient(135deg, var(--ib-lighter) 0%, var(--ib) 100%)
}