@import 'mixins/form';

@import 'mixins/a11y';
.multiselect-panel {
  &__checkboxes {
    max-width: var(--digi--typography--text--max-width);
    padding: var(--digi--layout--padding--15);
  }

  &__fieldset {
    @include msfa__fieldset;
  }

  &__checkboxes-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__checkboxes-item {
    margin-top: var(--digi--layout--gutter--s);

    &:first-child {
      margin-top: 0;
    }

    &--unavailable {
      margin-top: var(--digi--layout--gutter);
    }
  }

  &__search-wrapper {
    position: relative;
    margin-bottom: var(--digi--layout--gutter--l);

    &--searched {
      margin-bottom: var(--digi--layout--gutter--s);
    }
  }

  &__select-all {
    margin-bottom: var(--digi--layout--gutter--l);
  }

  &__search-input ::ng-deep .digi-ng-form-input__label {
    @include msfa__a11y-sr-only;
  }

  &__input-reset-button {
    position: absolute;
    right: 0;
    top: 1px;
  }
}

.multiselect-panel {
  position: relative;
  display: flex;
  flex-direction: column;

  ::ng-deep &__backdrop {
    background-color: rgba(var(--digi--ui--color--background--dark), 40%);
  }

  &__fieldset {
    margin: 0;
    padding: 0;
    border-width: 0;
  }

  &__legend {
    position: relative;
    text-align: left;
  }

  &__heading,
  &__legend {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: var(--digi--typography--font-weight--bold);
    font-size: var(--digi--typography--font-size);
    padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter);
    border-bottom: 1px solid var(--digi--ui--color--background--tertiary);
  }

  &__content {
    position: relative;
    flex-grow: 1;
  }

  &__inner-content {
    width: 100%;
    min-width: 300px;
    max-width: 800px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  &__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--digi--ui--color--background--tertiary);
    padding: $digi--layout--gutter $digi--layout--gutter--l;
  }

  &__no-options-available {
    text-align: center;
    padding: var(--digi--layout--gutter--s);
    max-width: 300px;
  }
}
