@use "../../base";

/// @access private
@mixin styles {
  .govuk-feedback {
    box-sizing: border-box;
    // Tie left/right padding to page gutter as it stretches across the whole
    // screen on smaller screens
    padding: base.govuk-spacing(4) base.$govuk-gutter-half base.govuk-spacing(5);
    border-top: 1px solid;
    border-color: base.govuk-functional-colour("brand");
    background-color: base.govuk-functional-colour("surface-background");

    @media #{base.govuk-from-breakpoint(tablet)} {
      padding-right: base.govuk-spacing(4);
      padding-left: base.govuk-spacing(4);
    }

    // Override $govuk-width-container's left and right margin as we want Feedback
    // to go across the whole screen on smaller screens
    @media #{base.govuk-until-breakpoint(tablet)} {
      margin-right: 0;
      margin-left: 0;
    }

    @media print {
      border-color: currentcolor;
      background-color: transparent;
    }
  }

  .govuk-feedback__title {
    @include base.govuk-font($size: 24, $weight: bold);
    margin-top: 0;
    color: base.govuk-functional-colour(text);
    @include base.govuk-responsive-margin(1, "bottom");
  }

  // Removes the bottom margin from the final child element eg: a paragraph
  //
  // Feedback body doesn't have any opinions about typography. Instead we defer
  // to users to use typography classes in their input, or apply a `govuk-body`
  // paragraph for if users pass `text`.
  .govuk-feedback__body > :last-child {
    margin-bottom: 0;
  }
}