/**
 * 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: block;
}
:host button {
  display: block;
  border: none;
  margin: 0;
  padding: 7px 16px;
  color: var(--mb-component-button-classic-text-color);
  background: var(--mb-component-button-classic-background);
  border: 1px solid var(--mb-component-button-classic-background);
  border-radius: var(--mb-component-button-classic-border-radius);
  font-family: var(--mb-font-family);
  font-size: var(--mb-component-button-classic-font-size);
  font-weight: var(--mb-component-button-classic-font-weight);
}
:host button:not([disabled]) {
  cursor: pointer;
}
:host button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

:host(.mobile) {
  width: 50%;
  display: flex;
  flex-direction: column;
}
:host(.mobile) button {
  display: block;
  border: none;
  margin: 0;
  padding: 7px 16px;
  color: var(--mb-component-button-classic-text-color);
  background: var(--mb-component-button-classic-background);
  border: 1px solid var(--mb-component-button-classic-background);
  border-radius: var(--mb-component-button-classic-border-radius);
  font-family: var(--mb-font-family);
  font-size: var(--mb-component-button-classic-font-size);
  font-weight: var(--mb-component-button-classic-font-weight);
}
:host(.mobile) button:not([disabled]) {
  cursor: pointer;
}
:host(.mobile) button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

:host(.quit-mobile) {
  width: 170%;
  display: flex;
  flex-direction: column;
}
:host(.quit-mobile) button {
  display: block;
  border: none;
  margin: 0;
  padding: 7px 16px;
  color: var(--mb-component-button-classic-text-color);
  background: var(--mb-component-button-classic-background);
  border: 1px solid var(--mb-component-button-classic-background);
  border-radius: var(--mb-component-button-classic-border-radius);
  font-family: var(--mb-font-family);
  font-size: var(--mb-component-button-classic-font-size);
  font-weight: var(--mb-component-button-classic-font-weight);
}
:host(.quit-mobile) button:not([disabled]) {
  cursor: pointer;
}
:host(.quit-mobile) button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

:host(.inverted) a,
:host(.inverted) button {
  background-color: white;
  color: var(--mb-component-button-classic-inverted-text-color);
  border: 1px solid var(--mb-component-button-classic-inverted-border-color);
}
:host(.inverted) button:hover,
:host(.inverted) button:active,
:host(.inverted) button:focus {
  cursor: pointer;
  background-color: var(--mb-component-button-classic-inverted-hover-background);
}
:host(.inverted) button:focus {
  border-color: var(--mb-component-button-classic-focused-border-color);
}