openfoodfoundation/openfoodnetwork

// Button class extensions

.neutral-btn {
  @include button;

  @include border-radius(0.5em);

  font-family: $body-font;
  background-color: transparent;
  border: 2px solid rgba(200, 200, 200, 1);
  color: #999;
}

.neutral-btn:hover, .neutral-btn:active, .neutral-btn:focus {
  background-color: rgba(200, 200, 200, 0.2);
  border: 2px solid rgba(200, 200, 200, 0.8);
}

.neutral-btn.dark {
  border-color: #000;
  color: #000;
}

.neutral-btn.dark:hover, .neutral-btn.dark:active, .neutral-btn.dark:focus {
  background-color: rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 0 #fff;
}

.neutral-btn.light {
  border-color: #fff;
  color: #fff;
}

.neutral-btn.light:hover, .neutral-btn.light:active, .neutral-btn.light:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.neutral-btn.turquoise {
  border-color: $clr-turquoise;
  color: $clr-turquoise;
}

.neutral-btn.turquoise:hover, .neutral-btn.turquoise:active, .neutral-btn.turquoise:focus {
  background-color: rgba(0, 0, 0, 0.1);

  // text-shadow: 0 1px 0 #fff
}

// Rewrite foundation's .primary button style

.button, button {
  @include border-radius(0.5em);

  outline: none;

  &.x-small {
    padding: 0.5rem 0.75rem;
    font-size: $text-xs;
    font-weight: 600;
    margin: 0;
  }
}

.button.primary, button.primary {
  font-family: $body-font;
  background: $orange-450;
  color: white;
}

.button.primary:hover, .button.primary:active, .button.primary:focus, button.primary:hover, button.primary:active, button.primary:focus {
  background: $orange-400;
  text-shadow: 0 1px 0 $orange-450;
}

button.success, .button.success {
  background: #0096ad;
}

.button.success:hover, .button.success:active, .button.success:focus, button.success:hover, button.success:active, button.success:focus {
  background: #14b6cc;
}

.button.help-btn {
  @include border-radius(999999px);

  &.tiny {
    padding: 0rem;
    margin: 0;
  }

  &.right {
    float: right;
  }

  i {
    font-size: 1.25rem;
  }
}

.profile-checkbox {
  display: inline-block;

  label {
    margin: 0 0.2rem;
    float: right;
  }
}

// Transparent button
.button.transparent {
  @include headingFont;

  font-size: 20px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.3);
  border: 3px solid #fff;
  text-shadow: none;

  &:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
  }
}

a.button.large {
  line-height: 2.75em;
}

button.large,
a.button.large {
  height: 3em;
  font-size: 1em;
  color: $white;
  border-radius: $radius-medium;
  margin: 0;
  padding: 0;

  &.dark {
    background-color: $grey-800;
    border: 1px solid $grey-600;
  }

  &.bright {
    background-color: $orange-500;
    border: none;
  }
}

// Responsive
@media screen and (min-width: 768px) {
  [role="main"] {
    padding: 0;
  }
}