/// Стили компонента «images» пакета Button visually impaired.
/// @group page

body {
  .bvi-body {
    &[data-bvi-images='true']:not(.bvi-no-styles) {
      .bvi-background-image:not(.bvi-no-styles),
      img.bvi-background-image:not(.bvi-no-styles),
      img.bvi-img:not(.bvi-no-styles) {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        visibility: visible;
      }
    }

    .bvi-img-caption {
      display: none;
    }

    &[data-bvi-images='false']:not(.bvi-no-styles) {
      img.bvi-img:not(.bvi-no-styles) {
        display: none;
      }

      .bvi-background-image:not(.bvi-no-styles) {
        background-image: none !important;
      }

      .bvi-img-caption {
        display: inline-block;
        max-width: 100%;
        margin: .25rem;
        padding: .25rem .5rem;
        border: .0625rem dashed;
        font-style: italic;
        vertical-align: middle;

        &::before {
          content: attr(data-bvi-caption);
        }
      }
    }

    &[data-bvi-images='grayscale']:not(.bvi-no-styles) {
      .bvi-background-image:not(.bvi-no-styles),
      img.bvi-background-image:not(.bvi-no-styles),
      img.bvi-img:not(.bvi-no-styles) {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        visibility: visible;
      }
    }
  }
}