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

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

: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;
  appearance: none;
  cursor: pointer;

  > * {
    user-select: none;
    pointer-events: none;
  }

  .icon-active {
    display: none;
  }

  &:focus-visible {
    border-color: var(--mb-component-button-border-color--visible);
  }

  &:hover, &:active {
    border-color: var(--mb-component-button-border-color-hover);

    .icon-active {
      display: block;
    }

    .icon-default {
      display: none;
    }
  }

  &:active {
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3);
  }

  &[disabled] {
    border-color: var(--mb-component-button-border-color-disabled);
    box-shadow: var(--mb-component-button-box-shadow-disabled);
    pointer-events: none;
    cursor: default;

    &::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: $padding-unit-medium;

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