:local {
  @import './config';
  .Button {
    display: inline-block;
    border-width: $button-border-width;
    border-style: solid;
    font-weight: $button-font-weight;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;

    &:hover {
      transition: all 0.3s ease;
    }

    &[disabled] {
      &,
      &:hover,
      &:active {
        opacity: $button-disabled-opacity;
        filter: alpha(opacity=(100 * $button-disabled-opacity));
        cursor: default;
      }
    }

    svg {
      vertical-align: baseline;
    }

    span + svg,
    svg + span {
      margin-left: 1.5 * $unit;
    }
  }

  .Button-small {
    padding: $button-small-padding-vert $button-small-padding-hor;
    @include fontSize($button-small-text-size-map);
  }

  .Button-medium {
    padding: $button-padding-vert $button-padding-hor;
    @include fontSize($button-text-size-map);
  }

  .Button-large {
    padding: $button-large-padding-vert $button-large-padding-hor;
    @include fontSize($button-large-text-size-map);
  }

  .Button-is-stretched {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .Button-is-flat {
    border-radius: 0;
  }

  .Button-is-rounded {
    border-radius: $button-border-radius;
  }

  .Button-default {
    text-transform: $button-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-text;
    }

    &,
    &:focus {
      background-color: $button-background;
      border-color: $button-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-hover-background;
      border-color: $button-hover-border;
      color: $button-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-active-background;
      border-color: $button-active-border;
      color: $button-active-text;
    }

    &.Button-is-selected {
      &,
      &:focus,
      &:hover,
      &:active,
      &:visited {
        background-color: $button-active-background;
        border-color: $button-active-border;
        color: $button-active-text;
        box-shadow: none;
      }

      &[disabled] {
        &,
        &:focus,
        &:hover,
        &:active,
        &:visited {
          background: $button-disabled-background;
          border-color: $button-disabled-border;
        }
      }
    }
  }

  .Button-primary {
    text-transform: $button-primary-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-primary-text;
    }

    &,
    &:focus {
      background-color: $button-primary-background;
      border-color: $button-primary-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-primary-hover-background;
      border-color: $button-primary-hover-border;
      color: $button-primary-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-primary-active-background;
      border-color: $button-primary-active-border;
      color: $button-primary-active-text;
    }

    &[disabled] {
      &,
      &:focus,
      &:active,
      &:visited {
        background-color: $button-primary-disabled-background;
        border-color: $button-primary-disabled-border;
        color: $button-primary-disabled-text;
      }
    }
  }

  .Button-secondary {
    text-transform: $button-secondary-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-secondary-text;
    }

    &,
    &:focus {
      background-color: $button-secondary-background;
      border-color: $button-secondary-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-secondary-hover-background;
      border-color: $button-secondary-hover-border;
      color: $button-secondary-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-secondary-active-background;
      border-color: $button-secondary-active-border;
      color: $button-secondary-active-text;
    }

    &[disabled] {
      &,
      &:hover,
      &:focus,
      &:active,
      &:visited {
        background-color: $button-secondary-disabled-background;
        border-color: $button-secondary-disabled-border;
        color: $button-secondary-disabled-text;
      }
    }
  }

  .Button-success {
    text-transform: $button-success-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-success-text;
    }

    &,
    &:focus {
      background-color: $button-success-background;
      border-color: $button-success-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-success-hover-background;
      border-color: $button-success-hover-border;
      color: $button-success-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-success-active-background;
      border-color: $button-success-active-border;
      color: $button-success-active-text;
    }

    &[disabled] {
      &,
      &:focus,
      &:active,
      &:visited {
        background-color: $button-success-disabled-background;
        border-color: $button-success-disabled-border;
        color: $button-success-disabled-text;
      }
    }
  }

  .Button-warning {
    text-transform: $button-warning-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-warning-text;
    }

    &,
    &:focus {
      background-color: $button-warning-background;
      border-color: $button-warning-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-warning-hover-background;
      border-color: $button-warning-hover-border;
      color: $button-warning-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-warning-active-background;
      border-color: $button-warning-active-border;
      color: $button-warning-active-text;
    }

    &[disabled] {
      &,
      &:focus,
      &:active,
      &:visited {
        background-color: $button-warning-disabled-background;
        border-color: $button-warning-disabled-border;
        color: $button-warning-disabled-text;
      }
    }
  }

  .Button-error {
    text-transform: $button-error-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-error-text;
    }

    &,
    &:focus {
      background-color: $button-error-background;
      border-color: $button-error-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-error-hover-background;
      border-color: $button-error-hover-border;
      color: $button-error-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-error-active-background;
      border-color: $button-error-active-border;
      color: $button-error-active-text;
    }

    &[disabled] {
      &,
      &:focus,
      &:active,
      &:visited {
        background-color: $button-error-disabled-background;
        border-color: $button-error-disabled-border;
        color: $button-error-disabled-text;
      }
    }
  }

  .Button-info {
    text-transform: $button-info-text-transform;

    &,
    &:focus,
    &:hover,
    &:active,
    &:visited,
    &[disabled]:hover,
    &[disalbed]:active {
      color: $button-info-text;
    }

    &,
    &:focus {
      background-color: $button-info-background;
      border-color: $button-info-border;
    }

    &:hover,
    &:hover:visited {
      background-color: $button-info-hover-background;
      border-color: $button-info-hover-border;
      color: $button-info-hover-text;
    }

    &:active,
    &:active:hover,
    &:active:visited {
      background-color: $button-info-active-background;
      border-color: $button-info-active-border;
      color: $button-info-active-text;
    }

    &[disabled] {
      &,
      &:focus,
      &:active,
      &:visited {
        background-color: $button-info-disabled-background;
        border-color: $button-info-disabled-border;
        color: $button-info-disabled-text;
      }
    }
  }
}