@layer components {
  :root {
    --secondary-btn__bg-color: var(--color-surface-primary);
    --secondary-btn__text-color: var(--color-neutral-700);
    --secondary-btn__border-radius: var(--border-radius-rounded-square);
    --secondary-btn__font-family: var(
      --typography-label-large-medium__font-family
    );
    --secondary-btn__font-size: var(--typography-label-large-medium__font-size);
    --secondary-btn__line-height: var(
      --typography-label-large-medium__line-height
    );
    --secondary-btn__letter-spacing: var(
      --typography-label-large-medium__letter-spacing
    );
    --secondary-btn__font-weight: var(
      --typography-label-large-medium__font-weight
    );
    --secondary-btn__ring-width: 1.5px;
    --secondary-btn__ring-color: var(--color-neutral-100);
    --secondary-btn__py: 0.5em;
    --secondary-btn__px: 1.25em;
    --secondary-btn__min-height: 3.5em;

    --secondary-btn__bg-color--hover: var(--color-neutral-100);
    --secondary-btn__text-color--hover: var(--secondary-btn__text-color);
    --secondary-btn__ring-width--hover: var(--secondary-btn__ring-width);
    --secondary-btn__ring-color--hover: var(--secondary-btn__ring-color);

    --secondary-btn__bg-color--active: var(--color-neutral-100);
    --secondary-btn__text-color--active: var(--secondary-btn__text-color);
    --secondary-btn__ring-width--active: var(--secondary-btn__ring-width);
    --secondary-btn__ring-color--active: var(--secondary-btn__ring-color);
  }

  :root.dark {
    --secondary-btn__text-color: var(--color-neutral-100);
    --secondary-btn__ring-color: var(--color-neutral-500);
    --secondary-btn__bg-color--hover: var(--color-neutral-500);
    --secondary-btn__bg-color--active: var(--color-neutral-500);
  }

  .secondary-btn {
    @apply text-center;
    @apply flex justify-center items-center;

    min-height: var(--secondary-btn__min-height);
    background-color: var(--secondary-btn__bg-color);
    color: var(--secondary-btn__text-color);
    border-radius: var(--secondary-btn__border-radius);
    font-family: var(--secondary-btn__font-family);
    font-size: var(--secondary-btn__font-size);
    line-height: var(--secondary-btn__line-height);
    letter-spacing: var(--secondary-btn__letter-spacing);
    font-weight: var(--secondary-btn__font-weight);
    @apply ring-inset
      ring-[length:var(--secondary-btn\_\_ring-width)]
      ring-[color:var(--secondary-btn\_\_ring-color)];
    padding: var(--secondary-btn__py) var(--secondary-btn__px);

    &:hover {
      background-color: var(--secondary-btn__bg-color--hover);
      color: var(--secondary-btn__text-color--hover);
      @apply ring-inset
        ring-[length:var(--secondary-btn\_\_ring-width--hover)]
        ring-[color:var(--secondary-btn\_\_ring-color--hover)];
    }

    &:active {
      background-color: var(--secondary-btn__bg-color--active);
      color: var(--secondary-btn__text-color--active);
      @apply ring-inset
        ring-[length:var(--secondary-btn\_\_ring-width--active)]
        ring-[color:var(--secondary-btn\_\_ring-color--active)];
    }
  }

  .secondary-btn__alternative-option-content {
    display: grid;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0px;
  }

  .secondary-btn__alternative-option-content * {
    @apply line-clamp-2;
  }

  .secondary-btn__alternative-option-content--with-badge {
    @apply secondary-btn__alternative-option-content;
    grid-template-areas: "icon title badge";
    grid-template-columns: 2.875rem auto 2.875rem;
  }

  .secondary-btn__alternative-option-content--no-badge {
    @apply secondary-btn__alternative-option-content;
    grid-template-areas: "icon title placeholder";
    grid-template-columns: 1rem 1fr 1rem;
  }
}

.secondary-btn__icon--sso-icon {
  font-size: 1em;
  width: 1em;
  height: 1em;
}

.secondary-btn__icon--material {
  font-size: 1.125em;
  width: 1.125em;
  height: 1.125em;
  margin: 0px -0.0625em; /* -1px when font size is 16px */
}
