button, .button, input[type='submit'] {
  font-size: inherit;
  line-height: inherit;
  vertical-align: bottom;
  display: inline-block;

  border: 1px solid #adb1b8;
  border-radius: var(--border-radius);
  box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
  padding: 6px 20px;
  white-space: nowrap;
  color: black;
  text-decoration: none;
  background-color: rgb(233, 233, 237);

  &:has(img) {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
  }

  &:hover {
    border-color: #a2a6ac #979aa1 #82858a;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  &:active {
    box-shadow: inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;
  }

  &:visited {
    color: black;
  }

  &[disabled] {
    color: gray;
    box-shadow: none;
    cursor: default;

    &:hover {
      border: 1px solid #adb1b8;
      border-color:  #adb1b8;
      box-shadow: none;
      color: gray;
    }
  }

  &.sm {
    font-size: 14px;
    padding: 3px 12px;

    img { max-height: 18px; }
  }

  &.tn {
    font-size: 12px;
    padding: 3px 8px;
    gap: 0.2rem;

    img { max-height: 15px; }
  }

  &.lg {
    font-size: 20px;
    font-weight: 400;
    padding: 10px 24px;

    img { max-height: 30px; }
  }

  img {
    display: inline-block;
    object-fit: contain;
    max-height: 20px;
  }
}