@microblink/blinkid-in-browser-sdk/ui/dist/collection/components/shared/mb-camera-toolbar/mb-camera-toolbar.css

A simple ID scanning library for WebAssembly-enabled browsers.

/**
 * Copyright (c) Microblink Ltd. All rights reserved.
 */
/**
 * Copyright (c) Microblink Ltd. All rights reserved.
 *
 * SASS variables, not customizable via CSS variables
 */
/**
 * Camera experiences
 */
:host {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(107, 114, 128, 0.7);
  -webkit-backdrop-filter: blur(var(--mb-blur-filter));
  backdrop-filter: blur(var(--mb-blur-filter));
}
:host header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 44px;
  align-items: center;
}
:host .camera-selection-wrapper {
  min-width: 0;
  position: relative;
}

@media only screen and (min-width: 1280px) {
  :host header {
    max-width: 1024px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}
/**
 * Toolbar buttons
 */
:host .toolbar-button {
  all: unset;
  flex-shrink: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: var(--mb-toolbar-border-radius);
  display: grid;
  place-content: center;
}
:host .toolbar-button.close-button {
  justify-self: end;
}
:host .toolbar-button svg {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.4));
}
:host .toolbar-button:hover {
  background-color: rgba(107, 114, 128, 0.3);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}
:host .toolbar-button:focus, :host .toolbar-button:active {
  box-shadow: 0 0 0 1px var(--mb-toolbar-border-color);
}
:host .flip-button {
  transform-style: preserve-3d;
  perspective: 600px;
  z-index: 1;
  justify-self: flex-start;
}
:host .flip-button svg {
  transition: transform 300ms;
  backface-visibility: visible;
  will-change: transform;
}
:host .flip-button.flipped svg {
  transform: rotateY(180deg);
}