@import "../common/colors";


.core-button {
  position: relative;
  border: none;
  padding: 0px 8px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-decoration: none;

  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  &.type-raised {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 2px;
    overflow: hidden;
    height: 36px;
    min-width: 88px;
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    &:active {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    &[disabled] {
      background: rgba(0, 0, 0, 0.12) !important;
      color: rgba(0, 0, 0, 0.26) !important;
      box-shadow: none;
    }
    .text {
      color: $color-white !important;
    }
    &.float-top-right {
      position: absolute !important;
      top: 28px;
      right: 28px;
    }
    &.float-top-left {
      position: absolute !important;
      top: 28px;
      left: 28px;
    }
    &.float-bottom-right {
      position: absolute !important;
      bottom: 28px;
      right: 28px;
    }
    &.float-bottom-left {
      position: absolute !important;
      bottom: 28px;
      left: 28px;
    }
  }

  &.type-floating {
    border-radius: 50%;
    overflow: hidden;
    height: 68px;
    width: 68px;
    padding: 0;
    z-index: 10;
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    &:active {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    &[disabled] {
      background: rgba(0, 0, 0, 0.12) !important;
      color: rgba(0, 0, 0, 0.26) !important;
      box-shadow: none;
    }

    &.color-primary {
      background: $color-white;
      color: #fff;
    }

    &.color-primary-dark {
      background: $color-primary-800;
      color: #fff;
    }

    &.color-accent {
      background: $color-accent;
      color: #fff;
    }

    &.float-top-right {
      position: absolute;
      top: 28px;
      right: 28px;
    }

    &.float-top-left {
      position: absolute;
      top: 28px;
      left: 28px;
    }
    &.float-bottom-right {
      position: absolute;
      bottom: 28px;
      right: 28px;
    }
    &.float-bottom-left {
      position: absolute;
      bottom: 28px;
      left: 28px;
    }
  }


  &.type-flat {
    font-size: 14px;
    font-weight: 400;
    height: 36px;
    min-width: 88px;
    overflow: hidden;
    border: none;
    border-radius: 2px;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0;
    outline: none;
    &[disabled] {
      background: 0 0 !important;
      color: rgba(0, 0, 0, 0.26) !important;
    }
    &:hover, &:focus {
      background: rgba(153, 153, 153, 0.21);
    }
    &:active {
      background: rgba(153, 153, 153, 0.4);
    }
    &.color-primary {
      color: $color-primary;
    }
    &.color-primary-dark {
      color: $color-primary-800;
    }
    &.color-accent {
      color: $color-accent;
    }
  }


  &.type-icon {
    padding: 0;
    overflow: hidden;
    &[disabled] {
      cursor: none;
      i:before {
        color: rgba(0, 0, 0, 0.2);
      }
    }
    &:active {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}