@import '../settings/variables';
@import '../tools/mixins/breakpoints';
@import '../tools/mixins/position';

.c-documents-filters {
  background-color: $color-blue-panel-background;
  border-radius: 0.25em;
  position: sticky;
  top: calc(#{$header-height} + 3em);

  @include media-breakpoint-down(lg) {
    &::after {
      content: " ";
      @include absolute(-18px, 7%, auto, auto);
      margin-left: -9px;
      border-width: 9px;
      border-style: solid;
      border-color: transparent transparent $color-blue-panel-background transparent;
    }
  }

  &__separator {
    border: 1px solid $color-white;
  }

  &__checkbox {
    height: 1em;
    width: 1em;
    border: 1px solid $color-mid-grey;
    background-color: $color-white;
    cursor: pointer;
    border-radius: 0.125em;

    &--selected {
      background-color: $color-primary;
      border: 1px solid $color-primary;
    }
  }
}