.slot-ticket-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  & input[type="radio"] + label::before,
  & input[type="radio"] + label::after {
    display: none;
  }
  & input[type="radio"] + label {
    padding: unset;
  }
  & .slot-ticket-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    @media (min-width: 650px) {
      grid-template-columns: 1fr 1fr;
    }
    & input[type="radio"]:checked + label,
    & label:hover {
      background-color: var(--ocean);
      color: var(--white);
    }
    & .slot-ticket-options__option {
      border: 1px solid var(--ocean);
      transition: all .1s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      font: var(--tall);
      border-radius: .5rem;
      background-color: var(--white);
    }
  }
  & .slot-ticket-selector__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: end;

    .slot-ticket-selector__amount-selector {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: .5rem;
      justify-content: center;
      align-items: center;
      input {
        max-width: 6rem;
      }
      .slot-ticket-selector__additional-trigger-remove,
      .slot-ticket-selector__additional-trigger-add {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
        border-radius: 50%;
        border: 1px solid;
        border-color: var(--ocean);
        background-color: var(--white);
        cursor: pointer;

        &:not(.disabled):hover {
          background-color: var(--ocean);
          color: var(--white);
        }

        &.disabled {
          background: darkgrey;
          cursor: not-allowed;
        }
      }
      .slot-ticket-selector__additional-trigger-remove,
      .slot-ticket-selector__additional-trigger-add {
        width: 30px;
        height: 30px;
      }

      .slot-ticket-selector__additional-trigger-add:after,
      .slot-ticket-selector__additional-trigger-remove:after {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .slot-ticket-selector__additional-trigger-add:after {
        content: '+';
        top: 46%;
      }

      .slot-ticket-selector__additional-trigger-remove:after {
        content: '-';
        top: 40%;
      }
    }
    & .slot-ticket-selector__add-to-cart {
      display: flex;
      gap: .5rem;
    }
  }
}