@use '../core/styles' as sbb;

$theme: 'standard' !default;

@mixin base {
  --sbb-timetable-form-background-color: var(--sbb-background-color-1);
  --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
  --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
    var(--sbb-border-color-4-inverted);
  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
  --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
  --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
}

@mixin rules {
  .sbb-timetable-form {
    --sbb-timetable-form-content-max-width: #{sbb.px-to-rem-build(740)};

    position: relative;
    display: flex;
    flex-direction: column;
    column-gap: var(--sbb-spacing-fixed-3x);
    border-radius: var(--sbb-border-radius-4x);
    padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
    padding-inline: var(--sbb-spacing-fixed-5x);
    background: linear-gradient(
      to bottom,
      var(--sbb-color-primary) 0 #{sbb.px-to-rem-build(178)},
      var(--sbb-background-color-3) #{sbb.px-to-rem-build(178)} 100%
    );

    @include sbb.mq($to: large) {
      &:has(sbb-signet) {
        padding-block-start: var(--sbb-spacing-fixed-4x);
      }
    }

    sbb-signet {
      width: var(--sbb-spacing-fixed-16x);
      align-self: end;
      margin-block-end: var(--sbb-spacing-fixed-2x);
      margin-inline: 0;

      @include sbb.mq($from: large) {
        position: absolute;
        inset-block-start: var(--sbb-spacing-fixed-6x);
        inset-inline-end: var(--sbb-spacing-fixed-6x);
      }
    }

    & > * {
      margin-inline: auto;
      max-width: var(--sbb-timetable-form-content-max-width);
      width: 100%;
    }
  }

  sbb-timetable-form {
    sbb-date-input {
      min-width: #{sbb.px-to-rem-build(133)}; // From FIGMA spec
    }

    :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) {
      --sbb-form-field-focus-underline-z-index: 1;

      width: 100%;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
        inset-inline: var(--sbb-form-field-padding-inline);
        inset-block-end: 0;
      }

      sbb-datepicker-toggle {
        margin-inline-end: var(--sbb-spacing-fixed-6x);
      }
    }

    @include sbb.mq($from: small) {
      .sbb-timetable-form-mobile-block {
        width: unset;

        &::after {
          display: none;
        }

        sbb-datepicker-toggle {
          margin-inline-end: unset;
        }
      }
    }

    @include sbb.mq($to: small) {
      .sbb-timetable-form-mobile-hidden {
        display: none;
      }
    }
  }
}