/**
 * The default button theme.
 */

*,
.context,
.ad.hoc {
  &.button {
    background-image: linear-gradient(to top, lightgray, white 50%, white);
    border: solid 1px gray;
    border-radius: 0.3em;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    margin: 0.1em;
    padding: 0.3em 1.2em;
    text-align: center;
    text-decoration: none;
    user-select: none;

    &:visited {
      color: inherit;
    }

    &.active,
    &:active {
      background-image: linear-gradient(to bottom, lightgray, white 50%, white);
      box-shadow: inset 0 1px 3px 0 lightgray;
      border-color: gray;
    }

    &:focus {
      box-shadow: 0 0 3px 1px lightblue;
      border-color: blue;
      outline: none;
    }
  }

  /* Additional styling of disabled buttons. */
  &.disabled {
    cursor: not-allowed;
    opacity: 0.33;

    // Note: this "cancels out" the active state styling of an active button,
    // which is defined above, thus ensuring a click on disabled button does
    // not alter its appearance (does not result in visual press).
    &.active,
    &:active {
      background-image: linear-gradient(to top, lightgray, white 50%, white);
      box-shadow: none;
    }
  }
}