/**
 * Copyright (c) Matthieu Jabbour. All Rights Reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

.ui-button {
  padding: 0 1em;
  min-width: 4em;
  min-height: 2.25em;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  pointer-events: all;
  transition:
    background-color 100ms linear,
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    color 100ms linear;

  &__label {
    @include ui-font(button);
  }

  &--icon {
    padding: 0;
    min-width: 2.25em;
    min-height: 2.25em;
    box-sizing: border-box;
  }
  &--icon &__icon {
    margin: auto;
  }
  // Right icon.
  &__label + &__icon {
    margin: 0 -0.25em 0 0.5em;
    vertical-align: -18%;
  }

  // Left icon.
  &__icon {
    @include ui-font(icon);
    text-align: center;
    vertical-align: -13%;
    margin: 0 0.5em 0 -0.25em;
  }

  // Disabled buttons.
  &--disabled {
    opacity: 0.4;
    color: #808080;
    pointer-events: none;
  }

  // Large buttons.
  &--large {
    font-size: 1.2em;
  }

  // Small buttons.
  &--small {
    font-size: 0.8em;
  }

  // Contained buttons.
  &--contained#{&} {
    & {
      @include ui-elevation(2);
      &:hover, &:focus-visible {
        @include ui-elevation(4);
      }
      &:active {
        @include ui-elevation(8);
      }
    }
    &--toggled, &--toggled:hover, &--toggled:focus-visible {
      @include ui-elevation(8);
    }
    &--disabled {
      color: #000000;
      background: #808080;
      @include ui-elevation(0);
    }
    @each $color in map-keys($colors) {
      &--#{$color} {
        color: ui-on-color($color);
        background: ui-color($color);
        &:hover {
          background: lighten(ui-color($color), 10%);
        }
        &:focus-visible {
          background: lighten(ui-color($color), 15%);
        }
        &:active {
          background: lighten(ui-color($color), 20%);
        }
      }
      &--#{$color}#{&}--toggled {
        &, &:hover, &:focus-visible {
          background: lighten(ui-color($color), 20%);
        }
      }
    }
  }

  // Outlined buttons.
  &--outlined#{&} {
    & {
      background: none;
      border: 1px solid #bebebe;
      border-radius: ui-shape(button);
    }
    &--disabled {
      border: 1px solid #808080;
    }
    @each $color in map-keys($colors) {
      &--#{$color} {
        color: ui-color($color);
        &:hover {
          background: ui-color($color, 0.05);
        }
        &:focus-visible {
          background: ui-color($color, 0.15);
        }
        &:active {
          background: ui-color($color, 0.2);
        }
      }
      &--#{$color}#{&}--toggled {
        &, &:hover, &:focus-visible {
          background: ui-color($color, 0.2);
        }
      }
    }
  }

  // Text buttons.
  &--text#{&} {
    background: none;
    &--disabled {
      color: #808080;
    }
    @each $color in map-keys($colors) {
      &--#{$color} {
        color: ui-color($color);
        &:hover {
          background: ui-color($color, 0.05);
        }
        &:focus-visible {
          background: ui-color($color, 0.15);
        }
        &:active {
          background: ui-color($color, 0.2);
        }
      }
      &--#{$color}#{&}--toggled {
        &, &:hover, &:focus-visible {
          background: ui-color($color, 0.2);
        }
      }
    }
  }
}