@use "../../variables/units";
@use "../../variables/media-query-breakpoints";
@use "../../components/button";

@use "../grid/grid.variables" as css-grid-variables;

dso-viewer-grid {
  .dso-filterblok {
    margin-inline-start: css-grid-variables.$grid-gutter-width * -0.5;
    margin-inline-end: css-grid-variables.$grid-gutter-width * -0.5;

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

  img {
    max-inline-size: unset;
  }

  .dso-toggle-main-button {
    @include button.tertiary($modifiers: false);

    padding-block: units.$u2;
  }
}