// This component relies on styles from GOV.UK Frontend

// Specify the functions used to resolve assets paths in SCSS
$govuk-image-url-function: "image-url";
$govuk-font-url-function: "font-url";

$gem-secondary-button-colour: #00823b;
$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
$gem-secondary-button-background-colour: govuk-colour("white");
$gem-secondary-button-hover-background-colour: govuk-colour("grey-4");

$gem-quiet-button-colour: govuk-colour("grey-1");
$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);

$gem-destructive-button-background-colour: govuk-colour("red");
$gem-destructive-button-hover-background-colour: darken($gem-destructive-button-background-colour, 5%);
$gem-destructive-button-border-colour: govuk-colour("black");

@import "../../../../node_modules/govuk-frontend/components/button/button";

@import "mixins/margins";

// Because govuk-frontend adds a responsive bottom margin by default for each component
// we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
// If we decide to use responsive margins consistently across components we can remove this
.gem-c-button {
  margin-bottom: 0;
}

// this will be moved and extended into a model for general component spacing
// once this has been decided upon and other work completed, see:
// https://trello.com/c/KEkNsxG3/142-3-implement-customisable-spacing-for-components
.gem-c-button--bottom-margin {
  @include responsive-bottom-margin;
}

.gem-c-button__info-text {
  display: block;
  max-width: 14em;
  margin-top: .5em;
}

.gem-c-button--secondary {
  padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2); // s1
  border-color: $gem-secondary-button-colour;
  color: $gem-secondary-button-colour;
  background-color: $gem-secondary-button-background-colour;
  box-shadow: none;

  &:link,
  &:visited,
  &:active {
    color: $gem-secondary-button-colour;
    background-color: $gem-secondary-button-background-colour;
    text-decoration: none;
  }

  &:link:focus {
    color: $gem-secondary-button-colour;
  }

  &:hover {
    border-color: $gem-secondary-button-hover-colour;
    color: $gem-secondary-button-hover-colour;
    background-color: $gem-secondary-button-hover-background-colour;
    text-decoration: none;
  }

  &:before {
    content: none;
  }
}

.gem-c-button--secondary-quiet {
  padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2); // s1
  border-color: $gem-quiet-button-colour;
  color: $gem-quiet-button-colour;
  background-color: $gem-secondary-button-background-colour;
  box-shadow: none;

  &:link,
  &:visited,
  &:active {
    color: $gem-quiet-button-colour;
    background-color: $gem-secondary-button-background-colour;
    text-decoration: none;
  }

  &:link:focus {
    color: $gem-quiet-button-colour;
  }

  &:hover {
    border-color: $gem-quiet-button-hover-colour;
    color: $gem-quiet-button-hover-colour;
    background-color: $gem-secondary-button-hover-background-colour;
    text-decoration: none;
  }

  &:before {
    content: none;
  }
}

.gem-c-button--destructive {
  background-color: $gem-destructive-button-background-colour;
  box-shadow: 0 2px 0 $gem-destructive-button-border-colour;

  &:link,
  &:visited,
  &:active {
    background-color: $gem-destructive-button-background-colour;
  }

  &:hover {
    background-color: $gem-destructive-button-hover-background-colour;
  }
}

// Begin adjustments for font baseline offset
// These should be removed when the font is updated with the correct baseline
// For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428

$offset: 2;

.gem-c-button--secondary,
.gem-c-button--secondary-quiet {
  padding-top: (govuk-spacing(2) - $govuk-border-width-form-element + $offset); // s1
  padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - $offset + 1); // s1
}