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

.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 font-bold text-center text-sm p-4 focus:ring-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;
  color: var(--btn-base-text-theme);
  border-color: color-mix(in srgb, var(--btn-base-border-theme) calc(var(--btn-base-border-theme-opacity) * 100%), transparent);
  background-color: color-mix(in srgb, var(--btn-base-theme) calc(var(--btn-base-theme-opacity) * 100%), transparent);

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

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

.cta-secondary,
.block-webform .pet-food-finder input[type="submit"].webform-button--previous {
  @apply font-decoration;
  color: var(--btn-secondary-text-theme);
  border-color: var(--btn-secondary-border-theme);
  background-color: var(--btn-secondary-theme);

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

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

.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);
  }

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

.cta-stacked .cta {
  min-width: 220px;
}

/* SWEEPS SPECIFIC */
.storage--sweepstakes input[type="submit"] {
  width: 100% !important;
}

.storage--sweepstakes .block-webform .form-actions {
  @apply md:px-20;
}

/* Webforms file upload button force focus on label styles */
.form-managed-file:has(input[type="file"]:focus) .cta {
  @apply ring-4 outline-none ring ring-theme-focus;
}

.form-managed-file:has(input[type="file"]:focus) .cta-primary {
  background-color: color-mix(in srgb, var(--btn-base-focus-theme) calc(var(--btn-base-focus-theme-opacity) * 100%), transparent);
}

.form-managed-file:has(input[type="file"]:focus) .cta-secondary {
  background-color: color-mix(in srgb, var(--btn-secondary-focus-theme) calc(var(--btn-secondary-focus-theme-opacity) * 100%), transparent);
}

.form-managed-file:has(input[type="file"]:focus) .cta-tertiary {
  background-color: color-mix(in srgb, var(--btn-tertiary-focus-theme) calc(var(--btn-tertiary-focus-theme-opacity) * 100%), transparent);
}