// Base Button CSS
.cbp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-width: var(--cbp-border-size-md);
  border-style: solid;
  border-radius: var(--cbp-border-radius-soft);
  cursor: pointer;
  font-weight: var(--cbp-font-weight-medium);
  letter-spacing: var(--cbp-letter-spacing-loose);
  text-decoration: none;
  text-transform: uppercase;  
  padding: var(--cbp-space-2x) var(--cbp-space-3x);
  transition: all var(--cbp-motion-duration-shorter);
  min-height: 2.25rem;

  & > i {
    //font-size: 1rem; // Revisit when converting to SVG icons
    margin-right: var(--cbp-space-2x);
  }

  &:focus {
    background-color: var(--cbp-color-interactive-focus-dark);
    border-color: var(--cbp-color-interactive-focus-dark);
    color: var(--cbp-color-text-lightest);
    outline: var(--cbp-border-size-md) solid var(--cbp-color-white);
    outline-offset: calc(-1 * var(--cbp-space-1x));
  }

  &:active {
    background-color: var(--cbp-color-interactive-active-dark);
    border-color: var(--cbp-color-interactive-active-dark);
  }

  // Prevents active state appearing when clicking on disabled buttons
  &:disabled:not(:enabled) {
    background-color: var(--cbp-color-interactive-disabled-dark);
    border-color: var(--cbp-color-interactive-disabled-dark);
    color: var(--cbp-color-interactive-disabled-light);
    font-style: italic;
    cursor: not-allowed;
  }
}

.cbp-btn-square {
  @extend .cbp-btn;
  padding: unset;
  letter-spacing: unset;
  height: 2.25rem;
  width: 2.25rem;

  & > i {
    margin-right: 0;
  }
}

.cbp-btn-cta {
  @extend .cbp-btn;
  font-size: var(--cbp-font-size-heading-sm);
  padding-left: var(--cbp-space-4x);
  padding-right: var(--cbp-space-4x);
  min-height: 3.25rem;

  & > i {
    margin-top: -1px;
    margin-right: var(--cbp-space-3x);
  }
}


/* Dark Mode */
[data-cbp-theme='dark'] {
  .cbp-btn {
    &:hover:not(:focus):not(:disabled) {
      background-color: var(--cbp-color-interactive-focus-light);
      border-color: var(--cbp-color-interactive-focus-light);
      color: var(--cbp-color-text-darkest);
    }

    &:focus {
      background-color: var(--cbp-color-interactive-focus-light);
      border-color: var(--cbp-color-interactive-focus-light);
      color: var(--cbp-color-text-darkest);
      outline: var(--cbp-border-size-md) solid var(--cbp-color-black);
      outline-offset: calc(-1 * var(--cbp-space-1x));
    }
  
    // Prevents active state appearing when clicking on disabled buttons
    &:disabled:not(:enabled) {
      background-color: var(--cbp-color-interactive-disabled-dark);
      border-color: var(--cbp-color-interactive-disabled-dark);
      color: var(--cbp-color-interactive-disabled-light);
    }
  }
}


// Ripple Animation on Button Click
span.ripple {
  animation: ripple 400ms linear;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}