@import 'mixins/overlay';
@import 'variables';
@import 'mixins/media';

:host {
  @include overlay-host;
}

.selection-container {
  overflow: scroll;
}

.flexible-container {
  &.is-iPad {
    height: 100%;
    overflow: scroll;

    display: grid;
    grid-template-rows:
      min-content min-content min-content 1fr
      75px;
  }
}

app-select-filter {
  @include mq-desktop() {
    position: relative;
  }
}

app-selected-filter-options {
  margin-bottom: 30px;
}

.apply-filter-wrapper {
  text-align: center;
  padding-bottom: 5px;

  position: relative;
  transform: translate(-50%);
  bottom: 25px;
  left: 50%;
  width: min-content;

  &.is-iPad {
    position: sticky;
    bottom: 0;
    display: flex;
    transform: translateX(-50%);
    left: 50%;
    width: min-content;
    padding-top: 10px;
  }
}

.btn-apply-filters {
  padding: 18px 27px 20px 27px;
  border-radius: 57px;
  font-size: 18px;
}

.text-nowrap {
  white-space: nowrap;
}

:host ::ng-deep .select-filter-options-content {
  max-height: 0;
  overflow: scroll;

  @include mq-tablet-landscape() {
    max-height: 200px;
  }

  @include mq-desktop() {
    max-height: 300px;
  }
}
