/*
  button component

  basic
    icon
    label for screen readers
    secondary
*/



@layer common-styling {

  /* basic
  ============================================================================ */
  .pos-button,
  .pos-button * {
    box-sizing: border-box;
  }

  .pos-button {
    all: unset;
    display: revert;

    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
  }

  .pos-button {
    padding-inline: var(--pos-padding-input);
    height: var(--pos-height-input);
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    vertical-align: middle;

    background-color: var(--pos-color-button-default-background);
    border-width: var(--pos-border-input);
    border-style: solid;
    border-color: var(--pos-color-button-default-frame);
    border-radius: var(--pos-radius-button);
    outline: none;

    letter-spacing: .5pt;
    line-height: 1.2em;
    text-transform: uppercase;
    font-size: .95rem;
    font-weight: 500;
    color: var(--pos-color-button-default-foreground);

    transition: all .1s linear;
  }

  .pos-button:hover {
    background-color: var(--pos-color-button-default-hover-background);
    border-color: var(--pos-color-button-default-hover-frame);

    color: var(--pos-color-button-default-hover-foreground);
  }

  .pos-button:active {
    transform: scale(98%);
  }

  .pos-button:focus-visible {
    border-color: var(--pos-color-focused);
    box-shadow: 0 0 6px 1px var(--pos-color-focused);
  }

  .pos-button:disabled {
    background-color: var(--pos-color-button-default-disabled-background);
    border-color: var(--pos-color-button-default-disabled-frame);

    color: var(--pos-color-button-default-disabled-foreground);
  }

  /* icon */
  .pos-button svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;

    fill: currentColor;

    transition: fill .2s ease-in-out;
  }

  .pos-button:focus-visible svg {
      fill: var(--color-page);
  }

  /* label for screen readers */
  .pos-button .pos-label {
      position: absolute;
      left: -200vw;
      top: -100vh;
  }



  /* secondary
  ============================================================================ */
  .pos-button-secondary {
    background-color: var(--pos-color-button-secondary-background);
    border-color: var(--pos-color-button-secondary-frame);

    color: var(--pos-color-button-secondary-foreground);
  }

  .pos-button-secondary:hover {
    background-color: var(--pos-color-button-secondary-hover-background);
    border-color: var(--pos-color-button-secondary-hover-frame);

    color: var(--pos-color-button-secondary-hover-foreground);
  }

  .pos-button-secondary:active {
    transform: scale(98%);
  }

  .pos-button-secondary:disabled {
    background-color: var(--pos-color-button-secondary-disabled-background);
    border-color: var(--pos-color-button-secondary-disabled-frame);

    color: var(--pos-color-button-secondary-disabled-foreground);
  }

}