docs/docs/_sass/components/_button.scss
// Buttons
// ----------------------------------------------
// ----------------------------------------------

.button {
  display: block;
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  position: relative;

  &:hover {
    cursor: pointer;
  }

  > img {
    vertical-align: bottom;
  }
}

.error-button {
  display: block;
  background: none;
  border: solid 1px;
  padding: ($base-point-grid) ($base-point-grid * 3);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.close {
  height: 28px;
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;

  &::after,
  &::before {
    background-color: #fff;
    content: " ";
    height: 100%;
    left: 98%;
    position: absolute;
    top: 50%;
    width: 2px;
  }

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }
}

// Slack channel link button
.slack-link-container {
  position: fixed;
  bottom: $base-point-grid;
  right: ($base-point-grid * 2);
  padding: 0.5em 0.5em;
  min-width: $github-modal-width;
  border-radius: .2em;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: right .3s ease;
  box-shadow: $box-shadow-button;
  background: $white;
  font-weight: $font-semibold;
  color: $box-text-color;

  .slack-link {
    color: lighten($box-text-color, 25%);

    &:hover {
      color: $box-text-color;
    }
  }

  .slack-head-line {
    display: flex;
    justify-content: space-between;
  }
}

.hide-slack-icon {
  font-size: $base-font-size;
  cursor: pointer;
  width: $text-box-icon-size;
  height: $text-box-icon-size;
  border-radius: ($base-point-grid * 3);
  margin-right: 2px;

  &:hover {
    background-color: lighten($brand-tertiary, 15%);
  }
}

.show-slack-icon {
  color: $box-text-color;
  font-weight: $font-semibold;
  font-size: $base-font-size;
  cursor: pointer;
  position: fixed;
  right: -80px;
  bottom: 37px;
  background-color: lighten($brand-tertiary, 15%);
  border-radius: ($base-point-grid * 3) 0 0 ($base-point-grid * 3);
  transition: padding .2s ease, right .2s ease, left .2s ease;
  padding: 5px ($base-point-grid * 2);
  box-shadow: 0 1px 1px 0 rgba($gray-primary,.3),0 1px 3px 1px rgba($gray-primary,.15);

  &:hover {
    padding-right: ($base-point-grid * 3);
  }
}

.show-slack-icon-visible {
  right: 0;
}

.slack-text-out {
  right: -200px;
}
