@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-date-range-picker') {
  --sky-override-date-range-picker-margin-right: 0;
  --sky-override-date-range-picker-padding-left: #{$sky-padding-half};
  --sky-override-date-range-picker-padding-right: #{$sky-padding-half};
  --sky-override-date-range-picker-responsive-bottom-margin: var(
    --sky-margin-stacked-lg
  );
}

:host {
  display: block;
}

.sky-date-range-picker {
  display: flex;
}

@include mixins.sky-host-responsive-container-xs-min() {
  .sky-date-range-picker {
    flex-direction: column;
  }

  .sky-date-range-picker-form-group {
    flex-basis: 100%;

    &:not(:first-of-type) {
      padding-left: initial;
    }

    &:not(:last-of-type) {
      padding-right: initial;
    }

    &:not(.sky-date-range-picker-last-input) {
      margin-bottom: var(
        --sky-override-date-range-picker-responsive-bottom-margin,
        var(--sky-space-gap-form-l)
      );
      margin-right: 0;
    }
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .sky-date-range-picker {
    flex-direction: initial;
  }

  .sky-date-range-picker-form-group {
    flex-basis: calc(100% / 3);
    padding: 0;

    &:not(:first-of-type) {
      padding-left: var(--sky-override-date-range-picker-padding-left, 0);
    }

    &:not(:last-of-type) {
      padding-right: var(--sky-override-date-range-picker-padding-right, 0);
    }

    &:not(.sky-date-range-picker-last-input) {
      margin-bottom: 0;
      margin-right: var(
        --sky-override-date-range-picker-margin-right,
        var(--sky-space-gap-form-l)
      );
    }
  }
}

// Because of how inline filters use flex for their layout -
// we need to set flex-basis to 100% if the date range picker is within an inline filter item.
@include mixins.sky-host-responsive-container-sm-min(false) {
  :host-context(sky-filter-inline-item) {
    .sky-date-range-picker-form-group {
      flex-basis: 100%;
    }
  }
}
