/*! UNITS v0.1.20 | MIT License | Copyright 2017 @kokushing | mail@kokush.in | https://unitscss.com */
/**
 * UNITS btn components
 *
 * ==================================
 * @base:   [.uc-btn]
 * ==================================
 * @parts:  [.uc-***]
 *          [.uc-***]
 * ==================================
 * @option: [._***]
 *          [._***]
 * ==================================
 */

.uc-btn {
  display: inline-block;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  background-color: white;
  border: 2px solid white;
  line-height: 1;
  outline: transparent;
  cursor: pointer;
  -webkit-transition: all .35s cubic-bezier(.25, .8, .25, 1);
  transition: all .35s cubic-bezier(.25, .8, .25, 1);
}

@media (max-width: 768px) {

.uc-btn {
    max-width: 240px;
    width: 100%
}
  }

.uc-btn:hover {
    background-color: #eee;
    border: 2px solid #eee;
  }

.uc-btn + .uc-btn {
    margin: 0 0 0 16px;
  }

@media (max-width: 768px) {

.uc-btn + .uc-btn {
      margin: 16px 8px 0
  }
    }

.uc-btn > span,
  .uc-btn > a {
    display: block;
    padding: 18px 48px;
    text-decoration: none;
    text-transform: uppercase;
    color: #333;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: .05em;
    -webkit-transition: all .35s cubic-bezier(.25, .8, .25, 1);
    transition: all .35s cubic-bezier(.25, .8, .25, 1);
  }

@media (max-width: 768px) {

.uc-btn > span,
  .uc-btn > a {
      width: 100%;
      padding: 16px 24px;
      text-align: center;
      font-size: .875rem
  }
    }

._ghost .uc-btn > span, ._ghost .uc-btn > a {
      color: #333;
    }

.uc-btn._full {
    display: block;
    width: 100%;
  }

.uc-btn._full + .uc-btn {
      margin: 16px 0 0;
    }

.uc-btn._round {
    border-radius: 80px;
  }

.uc-btn._ghost > a,
  .uc-btn._ghost > span,
  .uc-btn._primary > a,
  .uc-btn._primary > span,
  .uc-btn._secondary> a,
  .uc-btn._secondary> span,
  .uc-btn._success> a,
  .uc-btn._success> span,
  .uc-btn._danger> a,
  .uc-btn._danger> span,
  .uc-btn._warning > a,
  .uc-btn._warning > span {
    color: white;
  }

.uc-btn._ghost {
    background-color: transparent;
  }

.uc-btn._ghost:hover {
      background-color: white;
    }

.uc-btn._ghost:hover > a,
      .uc-btn._ghost:hover > span {
        color: #333;
      }

.uc-btn._primary {
    background-color: #546e7a;
    border: 2px solid #546e7a;
  }

.uc-btn._primary:hover {
      background-color: #37474f;
      border: 2px solid #37474f;
    }

.uc-btn._secondary {
    background-color: #333;
    border: 2px solid #333;
  }

.uc-btn._secondary:hover {
      background-color: black;
      border: 2px solid black;
    }

.uc-btn._success {
    background-color: #43a047;
    border: 2px solid #43a047;
  }

.uc-btn._success:hover {
      background-color: #237d32;
      border: 2px solid #237d32;
    }

.uc-btn._danger {
    background-color: #e53935;
    border: 2px solid #e53935;
  }

.uc-btn._danger:hover {
      background-color: #c62828;
      border: 2px solid #c62828;
    }

.uc-btn._warning {
    background-color: #fdd835;
    border: 2px solid #fdd835;
  }

.uc-btn._warning:hover {
      background-color: #f9a825;
      border: 2px solid #f9a825;
    }

.uc-btn._disabled,
  .uc-btn:disabled {
    background-color: #eee;
    border: 2px solid #eee;
    position: relative;
    cursor: default;
    opacity: .5;
  }

.uc-btn._disabled:before, .uc-btn:disabled:before {
      content: " ";
      display: block;
      width: 100%;
      height: 100%;
      background-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

.uc-btn._icon {
    line-height: 1;
  }

.uc-btn._icon i {
      font-size: 1.125rem;
    }

.uc-btn-unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 768px) {

.uc-btn-unit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column
}
  }

._center .uc-btn-unit,
  .uc-btn-unit._center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
