@microblink/blinkid-in-browser-sdk/ui/dist/collection/components/shared/mb-button/mb-button.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 {
  box-sizing: border-box;
  display: none;
}

button {
  display: grid;
  place-items: center;
  position: relative;
  width: calc(var(--mb-component-button-size) - 2 * var(--mb-component-button-border-width));
  height: calc(var(--mb-component-button-size) - 2 * var(--mb-component-button-border-width));
  padding: 0;
  background-color: var(--mb-component-button-background);
  border-color: var(--mb-component-button-border-color);
  border-radius: var(--mb-component-button-border-radius);
  border-style: var(--mb-component-button-border-style);
  border-width: var(--mb-component-button-border-width);
  box-shadow: var(--mb-component-button-box-shadow);
  text-decoration: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
button > * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
button .icon-active {
  display: none;
}
button:focus-visible {
  border-color: var(--mb-component-button-border-color--visible);
}
button:hover, button:active {
  border-color: var(--mb-component-button-border-color-hover);
}
button:hover .icon-active, button:active .icon-active {
  display: block;
}
button:hover .icon-default, button:active .icon-default {
  display: none;
}
button:active {
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3);
}
button[disabled] {
  border-color: var(--mb-component-button-border-color-disabled);
  box-shadow: var(--mb-component-button-box-shadow-disabled);
  pointer-events: none;
  cursor: default;
}
button[disabled]::before {
  opacity: 0.5;
}

:host(.visible) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

:host(.selected) button {
  background-color: var(--mb-component-button-background-selected);
  border-color: var(--mb-component-button-border-color-selected);
}

/**
 * Action buttons
 */
label {
  cursor: inherit;
}

/**
 * Action labels
 */
span {
  display: block;
  padding-top: 8px;
  font-size: var(--mb-component-font-size);
  font-weight: var(--mb-font-weight);
  line-height: var(--mb-line-height);
  color: var(--mb-feedback-font-color-info);
}