.bz-modal-view {
  background-color: $bz-neutral-100;
  color: $bz-neutral-600;

  &--hidden {
    display: none;
  }
}

.bz-modal-view {
  &__header {
    align-items: center;
    border-bottom: 1px solid $bz-neutral-300;
    display: flex;
    justify-content: space-between;
    padding-bottom: $bz-space-inset-s;
    padding-top: $bz-space-inset-s;

    &--active {
      border-bottom: 1px solid $bz-theme-400;
    }
  }

  &__header-multiple {

    .bz-search__header {
      align-items: center;
      border-bottom: 1px solid $bz-neutral-300;
      display: flex;
      justify-content: space-between;
      padding-bottom: $bz-space-inset-s;
      padding-top: $bz-space-inset-s;

      &--active {
        border-bottom: 1px solid $bz-theme-400;
      }
    }
  }

  &__content .bz-checkbox-list {
    padding: $bz-space-inset-squish-s;
  }

  &__title {
    color: $bz-neutral-600;
    font-size: $bz-space-inset-m;
    font-weight: $bz-font-weight-semibold;
    padding: $bz-space-inset-s $bz-space-inset-m;
  }

  &__footer {
    align-items: center;
    background-color: $bz-neutral-100;
    border-top: 1px solid $bz-neutral-300;
    display: flex;
    justify-content:flex-end;
    padding: $bz-space-inset-m;
  }

  &__clear {
    opacity: 0;
    padding: $bz-space-inset-s;
    pointer-events: none;
    position: relative;
    transition: opacity 0.3s;

    &::after {
      background: $bz-neutral-300;
      bottom: 0;
      content: "";
      position: absolute;
      right: -.4rem;
      top: 0;
      width: 1px;
    }

    &--visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__search {
    border: 0;
    flex: 1;
    line-height: 1.5;
    padding: $bz-space-inset-squish-s;
  }

  &__close {
    padding: $bz-space-inset-s;
    right: 0;
  }

  &--bordered {
    border: 1px solid $bz-neutral-100;
    background-color: $bz-neutral-100;
    border-radius: $bz-border-radius-l;
  }
}

[dir=rtl] {
  .bz-modal-view__clear {
    &::after {
      left: -.4rem;
      right: auto;
    }
  }

  .bz-modal-view__content {
    text-align: right;
  }
}