/**
 * @file
 * Visual styles for buttons.
 *
 */

 /* TODO: Can we enable opacity field in theme taxonomy and pass the opacity value in to the color-mix function on line 30? */

.cta,
.newsletterForm input[type="submit"],
.block-webform input[type="submit"],
.block-webform input[type="file"]::file-selector-button {
  @apply transition-colors duration-150 ease-in-out box-border cursor-pointer rounded-lg border-solid border-2 focus:ring-4 font-bold text-center text-sm p-4 focus:outline-none focus:ring focus:ring-theme-focus flex md:inline-block w-full md:w-fit items-center justify-center content-center;
}

.cta-primary,
.newsletterForm input[type="submit"],
.block-webform input[type="submit"],
.block-webform input[type="file"]::file-selector-button {
  @apply font-decoration text-theme-btn-base-text border-theme-btn-base-border bg-theme-btn-base hover:bg-theme-btn-base-hover hover:border-theme-btn-base-hover focus:bg-theme-btn-base-hover;
}

.cta-secondary,
.block-webform .pet-food-finder input[type="submit"].webform-button--previous {
  @apply font-decoration text-theme-btn-secondary-text border-theme-btn-secondary-border bg-theme-btn-secondary hover:bg-theme-btn-secondary-hover focus:bg-theme-btn-secondary-hover;
}

.cta-tertiary {
  @apply font-decoration underline-offset-8 hover:underline focus:outline-none;
  color: var(--btn-tertiary-text-theme);
  border-color: color-mix(in srgb, var(--btn-tertiary-border-theme) calc(var(--btn-tertiary-border-theme-opacity) * 100%), transparent);
  background-color: color-mix(in srgb, var(--btn-tertiary-theme) calc(var(--btn-tertiary-theme-opacity) * 100%), transparent);

  &:hover {
    background-color: color-mix(in srgb, var(--btn-tertiary-hover-theme) calc(var(--btn-tertiary-hover-theme-opacity) * 100%), transparent);
  }
}