$lbcamden-button-colour: $govuk-link-colour;
$lbcamden-button-hover-colour: lbcamden-colour("govuk-link-hover-colour");
$lbcamden-button-shadow-colour: govuk-shade($lbcamden-button-colour, 60%);
$lbcamden-button-text-colour: lbcamden-colour("white");
$lbcamden-button-border-radius: 3px;
$lbcamden-focus-box-shadow: 0 0 0 2px lbcamden-colour("black");

// Secondary button variables
$lbcamden-secondary-button-colour: lbcamden-colour("white");
$lbcamden-secondary-button-hover-colour: lbcamden-colour("govuk-link-hover-colour");
$lbcamden-secondary-button-text-colour: $govuk-link-colour;

// Warning button variables
$govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
$govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
$govuk-warning-button-text-colour: lbcamden-colour("govuk-negative-text-colour");

// Because the shadow (s0) is visually 'part of' the button, we need to reduce
// the height of the button to compensate by adjusting its padding (s1) and
// increase the bottom margin to include it (s2).
$button-shadow-size: $govuk-border-width-form-element;

.lbcamden-button,
.govuk-button {
  @include govuk-font($size: 19, $line-height: 19px);

  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2

  padding: govuk-spacing(2) govuk-spacing(3); // s1
  @include govuk-media-query($from: desktop) {
    padding: govuk-spacing(3);
  }
  border: $govuk-border-width-form-element solid transparent;
  border-radius: $lbcamden-button-border-radius;
  color: $lbcamden-button-text-colour;
  background-color: $lbcamden-button-colour;
  box-shadow: none;
  font-weight: $govuk-font-weight-semibold;
  text-align: center;
  text-underline-offset: $text-underline-offset;
  vertical-align: top;
  cursor: pointer;
  -webkit-appearance: none;

  @include govuk-media-query($from: tablet) {
    width: auto;
  }

  @include govuk-media-query($until: tablet) {
    line-height: 20px;
  }

  // Ensure that any global link styles are overridden
  &:link,
  &.\:link,
  &:visited,
  &.\:visited,
  &:active,
  &.\:active,
  &:hover,
  &.\:hover {
    color: $lbcamden-button-text-colour;
    text-decoration: none;
  }

  // Fix unwanted button padding in Firefox
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &:hover,
  &.\:hover {
    background-color: $lbcamden-button-hover-colour;
    text-decoration: underline;
    @include govuk-link-hover-decoration;
  }

  &:active,
  &.\:active {
    // Bump the button down so it looks like its being pressed in
    top: $button-shadow-size;
  }

  &:focus,
  &.\:focus {
    border-color: lbcamden-colour("govuk-focus-colour");
    // When colours are overridden, for example when users have a dark mode,
    // backgrounds and box-shadows disappear, so we need to ensure there's a
    // transparent outline which will be set to a visible colour.
    outline: $govuk-focus-width solid transparent;
    color: lbcamden-colour("govuk-focus-text-colour");
    background: lbcamden-colour("govuk-focus-colour");
    box-shadow: 0 0 0 2px lbcamden-colour("black");
    text-decoration: underline;
    @include govuk-link-hover-decoration;
    &:hover,
    &.\:hover {
      color: lbcamden-colour("white");
      background-color: $lbcamden-button-hover-colour;
    }
  }

  // The following adjustments do not work for <input type="button"> as
  // non-container elements cannot include pseudo elements (i.e. ::before).

  // Use a pseudo element to expand the click target area to include the
  // button's shadow as well, in case users try to click it.
  &:before {
    content: "";
    display: block;

    position: absolute;

    top: -$govuk-border-width-form-element;
    right: -$govuk-border-width-form-element;
    bottom: -($govuk-border-width-form-element + $button-shadow-size);
    left: -$govuk-border-width-form-element;

    background: transparent;
  }

  // When the button is active it is shifted down by $button-shadow-size to
  // denote a 'pressed' state. If the user happened to click at the very top
  // of the button, their mouse is no longer over the button (because it has
  // 'moved beneath them') and so the click event is not fired.
  //
  // This corrects that by shifting the top of the pseudo element so that it
  // continues to cover the area that the user originally clicked, which means
  // the click event is still fired.
  //
  // 🎉
  &:active:before {
    top: -($govuk-border-width-form-element + $button-shadow-size);
  }

  &--large {
    @include govuk-responsive-padding(4, "top");
    @include govuk-responsive-padding(4, "bottom");
    @include govuk-typography-weight-bold;
  }

  &--disabled,
  &[disabled="disabled"],
  &[disabled] {
    opacity: (.5);

    &:hover,
    &.\:hover {
      background-color: $lbcamden-button-colour;
      text-decoration: none;
      cursor: default;
    }

    &:active,
    &.\:active {
      top: 0;
      box-shadow: none;
    }
  }

  &--secondary {
    border: 3px solid $lbcamden-button-colour;
    color: $lbcamden-button-colour;
    background-color: lbcamden-colour("white");
    //box-shadow: 0 $button-shadow-size 0 $lbcamden-secondary-button-shadow-colour;

    &:link,
    &.\:link,
    &:visited,
    &.\:visited,
    &:active,
    &.\:active,
    &:hover,
    &.\:hover {
      color: $lbcamden-secondary-button-text-colour;
    }

    &:hover,
    &.\:hover {
      border-color: $lbcamden-secondary-button-hover-colour;
      color: $lbcamden-secondary-button-hover-colour;
      background: $lbcamden-secondary-button-colour;

      &[disabled] {
        background-color: $lbcamden-secondary-button-colour;
      }
    }

    &:focus,
    &.\:focus {
      color: lbcamden-colour("govuk-focus-text-colour");

      &:hover,
      &.\:hover {
        border-color: lbcamden-colour("govuk-focus-colour");
        color: $lbcamden-secondary-button-hover-colour;
        background: $lbcamden-secondary-button-colour;
        box-shadow: $lbcamden-focus-box-shadow;
      }
    }
  }

  &--warning {
    background-color: $govuk-warning-button-colour;

    &:link,
    &.\:link,
    &:visited,
    &.\:visited,
    &:active,
    &.\:active,
    &:hover,
    &.\:hover {
      color: $govuk-warning-button-text-colour;
    }

    &:hover,
    &.\:hover {
      background-color: $govuk-warning-button-colour;

      &[disabled] {
        background-color: $govuk-warning-button-colour;
      }
    }

    &:focus,
    &.\:focus {
      color: lbcamden-colour("govuk-focus-text-colour");

      &:hover,
      &.\:hover {
        border-color: lbcamden-colour("govuk-focus-colour");
        color: lbcamden-colour("white");
        background-color: $govuk-warning-button-colour;
        box-shadow: $lbcamden-focus-box-shadow;
      }
    }
  }

  &--start {
    @include govuk-typography-weight-bold;
    @include govuk-typography-responsive($size: 19, $override-line-height: 1);
    @include govuk-responsive-padding(4, "top");
    @include govuk-responsive-padding(4, "bottom");
    display: inline-flex;
    min-height: auto;

    justify-content: center;
  }

  &__start-icon {
    margin-left: govuk-spacing(1);

    @include govuk-media-query($from: desktop) {
      margin-left: govuk-spacing(2);
    }
    vertical-align: middle;
    flex-shrink: 0;
    align-self: center;
    // Work around SVGs not inheriting color from parent in forced color mode
    // (https://github.com/w3c/csswg-drafts/issues/6310)
    forced-color-adjust: auto;
  }

  .govuk-button-group &,
  .lbcamden-button-group & {
    @include govuk-responsive-margin(3, "right");
  }
}

@media print {
  .lbcamden-button,
  .govuk-button {
    all: unset;
    border: 1px solid lbcamden-colour("black") !important;
    color: lbcamden-colour("black") !important;
    padding: govuk-spacing(1) !important;
    break-inside: avoid;
  }
}