@use "sass:list";
@use "../partials/palette";

.btn,
.btn-check + .btn {
  border-radius: 0.5rem;
  border-width: 0.1875rem;
  padding-top: 0.8125rem;
  padding-bottom: 0.8125rem;

  &.small {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  &.btn-flex {
    display: inline-flex;
    flex-flow: row nowrap;
  }
}

.btn.small {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  i {
    font-size: 1.125rem;
    line-height: 1;
  }
  i + span,
  span + i {
    margin-left: 0.5rem;
  }
}

.btn-group {
  .btn,
  .btn-check + label.btn {
    .ph-radio-button,
    .ph-circle {
      padding-right: 0.5rem;
    }
    .ph-radio-button {
      display: none;
    }

    .ph-circle {
      display: initial;
    }
    &.active {
      .ph-radio-button {
        display: initial;
      }

      .ph-circle {
        display: none;
      }
    }
  }
  .btn-check:checked + label.btn {
    .ph-radio-button {
      display: initial;
    }

    .ph-circle {
      display: none;
    }
  }
}

$secondary: list.nth(palette.$purple, 7);

// TODO: integrate more cleanly with bootstrap, which doesn't seem to provide for custom checked states for custom button color states

.btn-check:checked + .btn.btn-secondary,
.btn-check + .btn.btn-secondary:hover,
.btn-check + .btn.btn-secondary:active,
.btn-group > .btn.btn-outline-primary:not(:checked):hover,
.btn-group > .btn.btn-outline-primary:not(:checked):active {
  color: palette.$white;
  background-color: $secondary;
  border-color: $secondary;
}
.btn-check:checked + .btn.btn-tertiary {
  color: palette.$white;
  background-color: $secondary;
  border-color: $secondary;
}


.sectionToggle {
  h5 + &,
  .h5 + & {
    margin-top: .75rem;
  }
}

.btn--icon-cta {
  padding: 0.8125rem 1.3125rem;
  i + span,
  span + i {
    margin-left: 0.5rem;
  }
}