IT61/it61-rails

.btn {
  &-small {
    padding: 9px 23px;
    font-size: 12px;
    font-weight: 500;
  }

  &-shadow {
    box-shadow: 0 2px 3.7px 0.3px rgba(20, 47, 69, 0.12);
  }

  &-not-linked {
    color: #777;
  }

  &-white {
    background-color: #fff;
    color: $blue;

    &:focus {
      background-color: shade(#fff, $btn-shade-percent);
      color: $blue;
    }
  }

  &-gray {
    background-color: $gray;
    color: $blue;

    &:hover {
      color: shade($blue, 15%);
    }

    &:focus {
      background-color: shade($gray, $btn-shade-percent);
      color: $blue;
    }
  }

  &-blue {
    background-color: $blue;
    color: #fff;

    &:hover {
      color: shade(#fff, 5%);
    }

    &:focus {
      background-color: shade($blue, $btn-shade-percent);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;

      &:hover {
        background-color: $blue;
      }
    }
  }


  &-red {
    background-color: $red;
    color: white;

    &:focus {
      background-color: shade($red, $btn-shade-percent);
      color: white;
    }
  }

  &-light-blue {
    background-color: #5daef2;
    color: #fff;
  }

  &-fab {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    bottom: 33px;
    font-size: 2.6667em;
    display: inline-block;
    cursor: pointer;
    z-index: 1;

    i {
      font-size: 22px;
    }

    a {
      color: #fff;
    }
  }

  &-fab.child {
    right: 41px;
    width: 42px;
    height: 42px;
    display: none;
    opacity: 0;
    font-size: 2em;
    position: absolute;
  }

  &-github {
    background: #f5f5f5;

    &:hover {
      color: shade($blue, 5%);
    }
  }

  &-vk {
    background: #597da3;
  }

  &-fb {
    background: #4a6ea9;
  }

  &-google {
    background: #cc3323;
  }

  &-vk, &-fb, &-google {
    color: #fff;

    &:hover {
      color: #eee;
    }
    
    &:active,
    &:focus {
      color: #225b89;
    }
  }


  &-group .btn {
    margin-right: 12px;

    &:last-child {
      margin-right: 0;
    }
  }

  &-more {
    display: block;
    margin: 30px auto;
    @include media(max-width $medium-screen) {
      width: 100%;
    }
  }
}