@use '../base/token';
@use '../abstract';

.cds-button-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;

  &__btn {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    color: var(--gray-400);
    line-height: abstract.division(token.$line-heights-7, token.$font-size-2);

    &.active {
      background-color: var(--gray-50);
      color: var(--secondary-gray-blue-500);
    }
  }
}