//compile

.md-flat-button,
.md-raised-button {
  position: relative;
  display: block;
  min-width: 64px;
  width: fit-content;
  height: 36px;
  line-height: 36px;

  padding: 0 8px;
  margin: 8px;

  border-radius: 2px;
  outline: none;
  border: none;
  cursor: pointer;
  overflow: hidden;

  text-align: center;
  text-decoration: none;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  .hover_overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
  }

  &[disabled],
  &.disabled {
    color: var(--md-disabled-text);
    cursor: default;

    .hover_overlay { display: none; }
  }
}

.md-flat-button {
  background-color: transparent;

  &.md-colored { color: var(--md-accent-color); }
}

.md-raised-button {
  background-color: var(--md-card);
  box-shadow: var(--md-shadow-2);

  &.md-colored { background-color: var(--md-accent-color); }

  &:active { box-shadow: var(--md-shadow-8); }

  &[disabled],
  &.disabled {
    background-color: var(--md-divider);
    box-shadow: none;
  }
}