/**
 * 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: 3em;
  min-height: 2em;
  border: 1px solid #d9dadc;
  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 cubic-bezier(0.3, 0, 0.5, 1),
    box-shadow 200ms cubic-bezier(0.3, 0, 0.5, 1);

  &__label {
    @include ui-font(button);
  }
  &--outlined &__label, &--text &__label {
    font-weight: 400;
  }

  &--icon {
    padding: 0;
    min-width: 3em;
    min-height: 2em;
    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: -18%;
    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(1);
    }
    &--disabled {
      color: #fafbfc;
      background: #808080;
      @include ui-elevation(0);
    }
    @each $color in map-keys($colors) {
      &--#{$color} {
        color: ui-on-color($color);
        background: ui-color($color);
        &:hover {
          background: darken(ui-color($color), 2%);
        }
        &:focus-visible {
          background: darken(ui-color($color), 3%);
        }
        &:active {
          background: darken(ui-color($color), 3%);
        }
      }
      &--#{$color}#{&}--toggled {
        &, &:hover, &:focus-visible {
          background: darken(ui-color($color), 3%);
        }
      }
    }
  }

  // Outlined buttons.
  &--outlined#{&} {
    & {
      background: none;
    }
    &--disabled {
      color: #808080;
      background: none;
    }
    @each $color in map-keys($colors) {
      &--#{$color} {
        color: ui-color($color);
        &:hover {
          color: ui-on-color($color);
          background: ui-color($color);
        }
        &:focus-visible {
          color: ui-on-color($color);
          background: darken(ui-color($color), 2%);
        }
        &:active {
          color: ui-on-color($color);
          background: darken(ui-color($color), 3%);
        }
      }
      &--#{$color}#{&}--toggled {
        &, &:hover, &:focus-visible {
          color: ui-on-color($color);
          background: darken(ui-color($color), 3%);
        }
      }
    }
  }

  // Text buttons.
  &--text#{&} {
    & {
      border: none;
      background: none;
    }
    &--disabled {
      color: #808080;
      background: none;
    }
    @each $color in map-keys($colors) {
      &--#{$color} {
        color: ui-color($color);
        &:hover {
          color: darken(ui-color($color), 1%);
        }
        &:focus-visible {
          color: darken(ui-color($color), 2%);
        }
        &:active {
          color: darken(ui-color($color), 3%);
        }
      }
      &--#{$color}#{&}--toggled {
        &, &:hover, &:focus-visible {
          color: darken(ui-color($color), 3%);
        }
      }
    }
  }
}