.cta {
  @extend %cta;
  @extend %transition-easing;

  // &:not(&--disabled) {
  //     opacity: 1;
  //     outline: none;
  //     fill: var(--tide-booking-cta-icon-color);
  //     color: var(--tide-booking-cta-color);
  //     background: var(--tide-booking-cta-background);
  // }

  @include media-xl {
    //font-size: 1.7rem;
  }

  &--add {
    @include media-xs {
      margin: var(--tide-booking-cta-margin-secondary);
    }

    span {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;

    &:hover,
    &:focus,
    &:active {
      opacity: 0.5;
    }
  }

  &--icon {
    flex-shrink: 0;
    white-space: nowrap;
  }

  &--secondary {
    @extend %cta--secondary;

    // &:not(&--disabled) {
    //   opacity: 1;
    //   outline: none;
    //   fill: var(--tide-booking-cta-icon-color-secondary);
    //   color: var(--tide-booking-cta-color-secondary);
    //   background: var(--tide-booking-cta-background-secondary);
    // }

    .icon {
      width: 16px;
      height: 16px;
    }
  }

  &--select {
    background: var(--tide-booking-cta-background-select);
    color: var(--tide-booking-cta-color-select);
    border: var(--tide-booking-cta-border-select);
    border-radius: var(--tide-booking-cta-border-radius-select);

    &:hover,
    &:focus,
    &:active {
      border: var(--tide-booking-cta-border-select-hover);
      background: var(--tide-booking-cta-background-select-hover);
      color: var(--tide-booking-cta-color-select-hover);
    }
  }

  &--selected {
    background: var(--tide-booking-cta-background-selected);
    color: var(--tide-booking-cta-color-selected);
    border: var(--tide-booking-cta-border-selected);
    border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);

    &:before {
      content: '';
      width: 13px;
      height: 6px;
      margin-right: 8px;
      display: inline-flex;
      flex-shrink: 0;
      border-left: 1.5px solid var(--tide-booking-cta-color-selected-icon);
      border-bottom: 1.5px solid var(--tide-booking-cta-color-selected-icon);
      transform: rotate(-45deg) translate3D(2px, -1px, 0);
    }

    &:hover,
    &:focus,
    &:active {
      border: var(--tide-booking-cta-border-selected);
      background: var(--tide-booking-cta-background-selected);
      color: var(--tide-booking-cta-color-selected);
    }
  }

  &--filter {
    position: absolute;
    right: 15px;
    top: -70px;
    width: auto;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 5px;
    background: var(--tide-booking-flight-options-filter-btn-background);
    color: var(--tide-booking-flight-options-filter-btn-color);
    border: var(--tide-booking-flight-options-filter-btn-border);
    border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);

    @include media-xs {
      padding: var(--tide-booking-cta-padding);
    }

    span {
      display: none;

      @include media-xs {
        display: flex;
      }
    }

    svg {
      fill: var(--tide-booking-flight-options-filter-btn-icon-color);
    }

    &:hover,
    &:focus,
    &:active {
      border: var(--tide-booking-flight-options-filter-btn-hover-border);
      background: var(--tide-booking-flight-options-filter-btn-hover-background);
      color: var(--tide-booking-flight-options-filter-btn-hover-color);

      svg {
        fill: var(--tide-booking-flight-options-filter-btn-hover-icon-color);
      }
    }
  }

  &--close {
    padding: 0px;
    background: transparent;
    border: none;
    position: absolute;
    top: -5px;
    right: 0px;
    justify-content: flex-end;

    .icon {
      width: 25px;
      height: 25px;
      fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
    }

    &:hover,
    &:focus,
    &:active {
      border: none;
      background: transparent;

      .icon {
        fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
      }
    }
  }

  &--add-remove {
    padding: 5px;
    background: var(--tide-booking-form-summary-voucher-remove-btn-background);
    border: var(--tide-booking-form-summary-voucher-remove-btn-border);
    border-radius: var(--tide-booking-form-summary-voucher-remove-btn-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    @extend %transition-easing;

    .icon {
      width: 16px;
      height: 16px;
      fill: var(--tide-booking-form-summary-voucher-remove-btn-color);
      @extend %transition-easing;
    }

    &:hover,
    &:focus,
    &:active {
      border: var(--tide-booking-form-summary-voucher-remove-btn-border-hover);
      background: var(--tide-booking-form-summary-voucher-remove-btn-background-hover);

      .icon {
        fill: var(--tide-booking-form-summary-voucher-remove-btn-color-hover);
      }
    }
  }

  &--remove {
    height: var(--tide-booking-cta-height-remove);
    width: var(--tide-booking-cta-width-remove);
    padding: var(--tide-booking-cta-padding-remove);
    color: var(--tide-booking-cta-color-remove);
    text-decoration: var(--tide-booking-cta-text-decoration-remove);
    background: var(--tide-booking-cta-background-remove);
    border: var(--tide-booking-cta-border-remove);
    border-radius: var(--tide-booking-cta-border-radius-remove);
    display: flex;
    justify-content: center;
    align-items: center;
    @extend %transition-easing;

    .icon {
      width: var(--tide-booking-cta-icon-size-remove);
      height: var(--tide-booking-cta-icon-size-remove);
      fill: var(--tide-booking-cta-icon-color-remove);
      @extend %transition-easing;
    }

    &:hover,
    &:focus,
    &:active {
      background: var(--tide-booking-cta-background-remove-hover);
      color: var(--tide-booking-cta-color-remove-hover);
      text-decoration: var(--tide-booking-cta-text-decoration-remove-hover);
      border: var(--tide-booking-cta-border-remove-hover);

      .icon {
        fill: var(--tide-booking-cta-icon-color-remove-hover);
      }
    }
  }
}