Cta: Inline

// TODO:
// - Check these colour contrasts are accessible
// - Interactive states (hover, focus, etc) not confirmed by UXDC
/* stylelint-disable */
.cta {
  &--primary,
  &--secondary,
  &--tertiary,
  &--efl,
  &--disabled {
    font-family: $text-font-ef;
    letter-spacing: 0.01em;
    font-size: 1.4rem;
    line-height: 2.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 30.6rem;
    min-height: 4.4rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease-in;
    border-radius: 2px;
    position: relative;
    white-space: nowrap;
    padding: 0 2rem;
  }

  &--primary {
    background-color: var(--brand-primary);
    color: white;
    border: 1px solid;

    &:hover {
      background-color: white;
      color: var(--brand-primary);
    }
  }
  &--secondary {
    background-color: white;
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);

    &:hover {
      background-color: var(--brand-primary);
      color: white;
      border: 1px solid;
    }
  }
  &--tertiary {
    background: var(--brand-secondary);
    border: none;
    color: var(--brand-tertiary);

    &:hover {
      background-color: var(--brand-tertiary);
      color: var(--brand-secondary);
    }
    [data-brand='womens'] & {
      color: var(--brand-primary);

      &:hover {
        background-color: var(--brand-primary);
        color: var(--brand-secondary);
      }
    }
  }
  &--efl {
    background-color: $red;
    color: white;
    border: 1px solid;

    &:hover {
      background-color: $crest-blue;
    }
  }

  &--disabled {
    background-color: $color-disabled;
    color: $color-primary;
  }

  &--primary:focus,
  &--secondary:focus {
    outline: 0;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: -2px;
      bottom: -2px;
      left: -2px;
      right: -2px;
      border-radius: inherit;
      box-shadow: 0 0 0 2px $color-interactive;
    }
  }
  &--inline {
    display: inline-flex;
  }
  &--dropdown {
    width: 100%;
    height: 44px;
    padding: 10px;
    background-color: #DD221A;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    color: white;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: FS Dillon;
    font-size: 16px;
    color: white;

    
  }
  &--questionnaire {
    background-color: #DD221A;
    color: #FFFFFF;
    font-family: FS Dillon;
    font-size: 16px;
    font-weight: 400;
    line-height: var(--spacingspacing-scale5);
    letter-spacing: 0.02em;
    text-align: center;
    gap: 30px;
    width: 314px;
    height: 44px;
    padding: 12px 64px;
    gap: var(--spacingspacing-scale00);
    border-radius: 4px;
    background: var(--surface-primary-button-surface-primary, #DD221A);
    cursor: pointer;
    border: none;
    outline: none; 
    box-shadow: none; 
    margin-top: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
 
    &:hover {
      background-color: $crest-blue;
    }}
}
:root [data-brand='legends'] {
  .cta {
    &--tertiary {
      background-color: var(--brand-tertiary);
      color: white;
    }
  }
}