@charset 'UTF-8';

.btn {
  text-decoration: none;
}

.btn-primary {
  border: none;
  transition: 0.3s;

  &:focus,
  &:hover {
    background-color: $brand-primary;
    box-shadow: inset 0 0 0 3px $gray-base;
  }
}

.btn-full {
  width: 100%;
}

.btn-lg {
  padding-bottom: 15px;
}

&.btn-secondary {
  background-color: $white;
  border: none;
  color: $black;
  box-shadow: inset 0 0 0 2px $gray-base;
  transition: 0.3s;

  &:hover {
    box-shadow: inset 0 0 0 3px $brand-primary;
  }
}

&.btn-outline {
  background-color: none;
  border: none;
  color: $black;
  box-shadow: inset 0 0 0 2px $gray-base;
  transition: 0.3s;

  &:hover {
    background-color: $gray-base;
    color: $white;
  }
}

&.form-small {
  padding: 0.4em ($grid-gutter-width / 2);
}

.form-inline .form-group {
  .btn { height: 100%; }
}

&.btn-blue {
  background-color: $brand-info;
  border: none;
  color: $black;
  box-shadow: inset 0 0 0 2px $brand-info;
  transition: 0.3s;

  &:hover {
    box-shadow: inset 0 0 0 3px $gray-base;
  }
}

.btn-icon {
  position: relative;
  min-width: $btn-icon-size-base;
  min-height: $btn-icon-size-base;
}

.btn-grey {
  background-color: $gray-darker;
  color: $brand-primary;
  font-size: 0.8rem;

  &:focus,
  &:hover {
    color: $white;
  }
}

.btn-underline {
  position: relative;
  background-color: none;
  border: none;
  box-shadow: none;

  // Bottom bar on hover
  &:before {
    content: " ";
    position: absolute;
    bottom: $padding-base-vertical / 2;
    left: $padding-base-vertical * 2;
    height: 2px;
    width: calc(100% - #{$padding-base-vertical * 4});
    background-color: $link-hover-color;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  &.active,
  &:hover {
    color: inherit;
    text-decoration: none;
    box-shadow: none;

    &:before {
      opacity: 1;
    }
  }
}