.ui {
  &-btn {
    @extend .ui-control !optional;
    font-family:    $font-family-base;
    position:       relative;
    font-weight:    $btn-font-weight;
    font-size:      $btn-font-size;
    line-height:    $btn-line-height;
    text-align:     center;
    white-space:    nowrap;
    vertical-align: middle;
    cursor:         pointer;
    user-select:    none;
    padding:        14px 28px;
    border-radius:  4px;
    outline:        none !important;
    background:     #ffffff;
    color:          $link-color;
    transition:     all 0.2s ease 0s;
    overflow:       hidden;
    z-index:        1;

    &.ui-btn--block {
      display:       inline-block;
      width:         100%;
      padding-left:  0;
      padding-right: 0;
    }

    &::-moz-focus-inner {
      border: 0;
    }

    [class^="uikit-"] {
      font-size:      1.4em;
      line-height:    ($btn-line-height * $btn-font-size);
      vertical-align: middle;

    }
    &:not(.ui-btn--circle) [class^="uikit-"] {
      &:first-child {
        margin-right: .25em;
      }
      &:last-child {
        margin-left: .25em;
      }
    }

    &[disabled] {
      color: map_get($colors, gray);
      cursor: default;
      background: #fff !important;
      border-color: map_get($colors, 'grayLight') !important;
      box-shadow: none !important;

      &:hover {
        border-color: map_get($colors, grayLight);
        background: #ffffff !important;
        box-shadow: none !important;
        color: map_get($colors, gray);
        border-color: map_get($colors, 'grayLight') !important;
      }
    }

    &:hover {
      z-index:      2;
      border-color: map_get($colors, mediumSeaGreen);
      color:        $link-hover-color;
    }

    &-group > .ui-btn {
      display:       block;
      float:         left;
      border-radius: 0;
      margin:        0 0 0 -1px;

      &:first-child {
        border-radius: 4px 0 0 4px;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }

    &--gray {
      @include btn-style(grayMedium, grayMedium, #ffffff);

      &:hover {
        @include btn-style(grayMedium, grayMedium, #ffffff);
      }
    }

    &--hover-green:hover {
      @include btn-style(limeGreen, limeGreen, #ffffff);
    }

    &--green {
      @include btn-style(limeGreen, limeGreen, #ffffff);
      box-shadow: 0 13px 45px -10px rgba(45, 159, 110, .6);

      &:hover {
        @include btn-style(mediumSeaGreen, mediumSeaGreen, #ffffff);
        box-shadow: 0 13px 45px -10px #1ac079;
      }
    }

    &--circle {
      border-radius:   100%;
      justify-content: center;
      align-content:   center;
      align-items:     center;
      text-align:      center;
      text-overflow:   ellipsis;
      white-space:     nowrap;
      width:           60px;
      height:          60px;
      padding:         0;

      [class^="uikit-"] {
        font-size:  1.8em;
        margin-top: 1px;
      }

      &[disabled] {
        @include btn-style(grayMedium, grayMedium, map_get($colors, gray));

        box-shadow: none !important;

        &:hover {
          border-color: map_get($colors, grayMedium);
          box-shadow:   none !important;
        }
      }

      i {
        margin-right: auto;
        margin-left: auto;
      }
    }

    &--lg {
      padding:     20px 25px;
      font-size:   1.2em;

      [class^="uikit-"] {
        line-height: ($btn-line-height * $btn-font-size * 1.2 - 1);
      }

      &--green {
        box-shadow: 0 13px 45px -10px rgba(45, 159, 110, .6);

        &:hover {
          box-shadow: 0 13px 45px -10px #1ac079;
        }
      }

      &.ui-btn--circle {
        height:  80px;
        width:   80px;
        padding: 0;

        [class^="uikit-"] {
          font-size: 2em;
        }
      }
    }

    &--sm {
      padding: 10px 28px;

      &.ui-btn--circle {
        height:  40px;
        width:   40px;
        padding: 0;

        [class^="uikit-"] {
          font-size: 1.15em;
        }
      }
    }

    &--xs {
      font-size: 11px;
      padding: 7px 18px;

      [class^="uikit-"] {
        line-height: ($btn-line-height * 11px);
      }

      &.ui-btn--circle {
        height:  24px;
        width:   24px;
        padding: 0;

        [class^="uikit-"] {
          font-size:  1.1em;
        }
      }
    }

    &--no-shadow {
      box-shadow: none;

      &:hover {
        box-shadow: none;
      }
    }
    &--center {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }
}