@use "../../variables/units";
@use "../../variables/media-query-breakpoints";
@use "../../variables/typography";
@use "../icon";
@use "../form-control";

@use "../../di";

.dso-context-wrapper {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block-end: units.$u1;
  row-gap: units.$u2;

  &.dso-align-left {
    justify-content: flex-start;
    column-gap: units.$u3;
    row-gap: units.$u1;

    .dso-context-container {
      margin-inline-start: 0;
    }
  }

  .dso-context-container {
    margin-inline-start: auto;
  }

  .dso-context-label {
    #{typography.$headings} {
      margin-block-end: 0;
      margin-block-start: 0;
    }
  }

  .dso-context-select {
    align-items: center;
    display: flex;

    label {
      margin-block-end: units.$u1;
      margin-inline-end: units.$u1;
    }

    select {
      @include form-control.root();
      @include di.variant("caret-down");

      -moz-appearance: none;
      -webkit-appearance: none;
      background-position: calc(100% - #{units.$u1});
      background-repeat: no-repeat;
      background-size: icon.$size icon.$size;
      padding-inline-end: units.$u4;
      inline-size: auto;
    }
  }
}

@media screen and (min-width: #{media-query-breakpoints.$screen-xs-min + 1}) {
  .dso-context-wrapper {
    .dso-context-container {
      .dso-context-select {
        label {
          margin-block-end: 0;
        }
      }
    }
  }
}

@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {
  .dso-context-wrapper {
    .dso-context-container {
      flex-basis: 100%;

      .dso-context-select {
        flex-wrap: wrap;

        label {
          flex-basis: 100%;
        }
      }
    }
  }
}