button,
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  border-radius: 10rem;
  background: var(--color-button-bg);
  color: var(--color-button-fg);
  border: none;
  padding: var(--spacing-xs) var(--spacing-s);
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 500 !important;
  text-decoration: none;
  transition: opacity var(--transition-easing);
  cursor: pointer;

  &:hover {
    opacity: .8;
  }

  a {
    text-decoration: none;
  }

  &.cta {
    padding: calc(var(--spacing-xs)*1.5) calc(var(--spacing-s)*1.5);
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-body);
    >div {
      font-size: var(--font-size-lead);
    }
  }

  &.secondary {
    --color-button-bg: var(--color-goldenBeige);
    --color-button-fg: var(--color-deepBrick);
  }

  &.tertiary {
    font-size: var(--font-size-caption);
    color: currentColor;
    background: transparent;
    border: 2px solid currentColor;
    padding: .2rem .75rem;
  }

  &.toggler {
    --color-button-bg: var(--color-chateauBlue);
    --color-button-fg: var(--color-chateauBlue);
    background: transparent;
    border: 2px solid var(--color-button-bg);
    padding: .25rem .5rem .25rem .75rem;
    position: relative;

    &:after {
      content: "";
      width: 1rem;
      height: 1rem;
      border-radius: 1rem;
      background: var(--color-white);
      border: 2px solid var(--color-button-bg);
    }

    &[data-active=true] {
      --color-button-bg: var(--color-chateauBlue);
      --color-button-fg: var(--color-white);
      background: var(--color-button-bg);

      &:after {
        content: "";
        width: 1rem;
        height: 1rem;
        border-radius: 1rem;
        background: var(--color-white);
        border: 2px solid var(--color-button-bg);
      }

      &:before {
        content: "";
        width: .4rem;
        height: .2rem;
        border-bottom: 3px solid var(--color-button-bg);
        border-left: 3px solid var(--color-button-bg);
        position: absolute;
        right: .8rem;
        transform: rotate(-45deg);
      }
    }

    &.hasIcon {
      --color-button-bg: var(--color-deepBrick);
      --color-button-fg: var(--color-deepBrick);
      &:after {
        display: none;
      }
      &[data-active=true] {
        --color-button-bg: var(--color-deepBrick);
        --color-button-fg: var(--color-betongGray);

        &:after, &:before {
          display: none;
        }
      }
    }
  }
}