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

A smart image capturing 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: flex;
  height: 44px;
  align-items: center;
  padding-inline: 32px;
}
:host header > * {
  display: block;
  flex-grow: 1;
}
:host .camera-selection-wrapper {
  position: relative;
}
:host mb-camera-selection {
  display: none;
}
:host mb-camera-selection.visible {
  display: block;
}

@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;
  -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 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;
  transition: transform 800ms;
  z-index: 1;
}
:host .flip-button.flipped {
  transform: rotateY(180deg);
}