/**
 * Copyright (c) Microblink Ltd. All rights reserved.
 */

@import "../styles/globals-sass";

:host {
  box-sizing: border-box;
  display: block;

  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);

    &:not([disabled]) {
      cursor: pointer;
    }

    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

:host(.inverted) {
  a {
    background-color: white;
    color: var(--mb-component-button-classic-inverted-text-color);
    border: 1px solid var(--mb-component-button-classic-inverted-border-color);
  }

  a:hover,
  a:active,
  a:focus {
    cursor: pointer;
    background-color: var(--mb-component-button-classic-inverted-hover-background);
  }

  a:focus {
    border-color: var(--mb-component-button-classic-focused-border-color);
  }
}