{"version":3,"sources":["../../../../src/govuk/components/accordion/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/accordion\") {\n  $govuk-accordion-base-colour: govuk-colour(\"black\");\n  $govuk-accordion-hover-colour: govuk-colour(\"black\", $variant: \"tint-95\");\n  $govuk-accordion-icon-focus-colour: govuk-functional-colour(focus);\n  $govuk-accordion-bottom-border-width: 1px;\n\n  .govuk-accordion {\n    @include govuk-responsive-margin(6, \"bottom\");\n  }\n\n  .govuk-accordion__section {\n    padding-top: govuk-spacing(3);\n  }\n\n  .govuk-accordion__section-heading {\n    // Override browser defaults to ensure consistent element height\n    margin-top: 0;\n    margin-bottom: 0;\n\n    padding-top: govuk-spacing(3);\n    padding-bottom: govuk-spacing(3);\n  }\n\n  .govuk-accordion__section-button {\n    @include govuk-font($size: 24, $weight: bold);\n\n    display: block;\n    margin-bottom: 0;\n    padding-top: govuk-spacing(3);\n    color: govuk-functional-colour(text);\n  }\n\n  // Remove the bottom margin from the last item inside the content\n  .govuk-accordion__section-content > :last-child {\n    margin-bottom: 0;\n  }\n\n  // GOV.UK Frontend JavaScript enabled\n  .govuk-frontend-supported {\n    .govuk-accordion {\n      // Border at the bottom of the whole accordion\n      border-bottom: $govuk-accordion-bottom-border-width solid;\n      border-bottom-color: govuk-functional-colour(border);\n    }\n\n    .govuk-accordion__section {\n      padding-top: 0;\n    }\n\n    // Hide the body of collapsed sections by default for browsers that lack\n    // support for `content-visibility` paired with [hidden=until-found]\n    .govuk-accordion__section-content {\n      display: none;\n\n      @include govuk-responsive-padding(3, \"top\");\n      @include govuk-responsive-padding(8, \"bottom\");\n    }\n\n    // Hide the body of collapsed sections using `content-visibility` to enable\n    // page search within [hidden=until-found] regions where browser supported\n    .govuk-accordion__section-content[hidden] {\n      @supports (content-visibility: hidden) {\n        content-visibility: hidden;\n        display: inherit;\n      }\n\n      // Hide the padding of collapsed sections\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    // Show the body of expanded sections\n    .govuk-accordion__section--expanded .govuk-accordion__section-content {\n      display: block;\n    }\n\n    .govuk-accordion__show-all {\n      @include govuk-font($size: 19);\n      position: relative;\n      z-index: 1;\n\n      margin-bottom: 9px;\n      padding: govuk-spacing(1) 2px govuk-spacing(1) 0;\n\n      border-width: 0;\n\n      color: govuk-functional-colour(link);\n      background: none;\n\n      cursor: pointer;\n      -webkit-appearance: none;\n\n      @media #{govuk-from-breakpoint(tablet)} {\n        margin-bottom: 14px;\n      }\n\n      // Remove default button focus outline in Firefox\n      &::-moz-focus-inner {\n        padding: 0;\n        border: 0;\n      }\n\n      &:hover {\n        color: $govuk-accordion-base-colour;\n        background: $govuk-accordion-hover-colour;\n        // The focus state adds a box-shadow to the top and bottom of the\n        // button. We add a grey box-shadow on hover too, to make the height of\n        // the hover state match the height of the focus state.\n        box-shadow:\n          0 -2px $govuk-accordion-hover-colour,\n          0 4px $govuk-accordion-hover-colour;\n\n        .govuk-accordion__section-toggle-text {\n          color: $govuk-accordion-base-colour;\n        }\n\n        .govuk-accordion-nav__chevron {\n          color: $govuk-accordion-base-colour;\n          background: $govuk-accordion-base-colour;\n        }\n\n        .govuk-accordion-nav__chevron::after {\n          color: $govuk-accordion-hover-colour;\n        }\n      }\n\n      &:focus {\n        @include govuk-focused-text;\n\n        .govuk-accordion-nav__chevron {\n          background: $govuk-accordion-base-colour;\n        }\n\n        .govuk-accordion-nav__chevron::after {\n          color: $govuk-accordion-icon-focus-colour;\n        }\n      }\n    }\n\n    .govuk-accordion__section-heading {\n      padding: 0;\n    }\n\n    // Create Chevron icon aligned with text\n    .govuk-accordion-nav__chevron {\n      box-sizing: border-box;\n      display: inline-block;\n\n      position: relative;\n\n      // Set size using rems so icon scales with text\n      width: govuk-px-to-rem(20px);\n      height: govuk-px-to-rem(20px);\n\n      border: govuk-px-to-rem(1px) solid;\n      border-radius: 50%;\n\n      vertical-align: middle;\n\n      // Create inner chevron arrow\n      &::after {\n        content: \"\";\n        box-sizing: border-box;\n        display: block;\n\n        position: absolute;\n        bottom: govuk-px-to-rem(5px);\n        left: govuk-px-to-rem(6px);\n\n        width: govuk-px-to-rem(6px);\n        height: govuk-px-to-rem(6px);\n\n        transform: rotate(-45deg);\n\n        border-top: govuk-px-to-rem(2px) solid;\n        border-right: govuk-px-to-rem(2px) solid;\n      }\n    }\n\n    // Rotate icon to create \"Down\" version\n    .govuk-accordion-nav__chevron--down {\n      transform: rotate(180deg);\n    }\n\n    .govuk-accordion__section-button {\n      width: 100%;\n\n      padding: govuk-spacing(2) 0 0;\n\n      border: 0;\n\n      border-top: $govuk-accordion-bottom-border-width solid;\n\n      // Visually separate the section from the one underneath when user changes\n      // colours in their browser. See\n      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488\n      border-bottom: govuk-spacing(2) solid transparent;\n\n      border-top-color: govuk-functional-colour(border);\n\n      color: govuk-functional-colour(text);\n      background: none;\n\n      text-align: left;\n      // Section headers have a pointer cursor as an additional affordance\n      cursor: pointer;\n      -webkit-appearance: none;\n\n      @media #{govuk-from-breakpoint(tablet)} {\n        padding-bottom: govuk-spacing(2);\n      }\n\n      &:active {\n        color: govuk-functional-colour(link-active);\n        background: none;\n      }\n\n      &:hover {\n        color: $govuk-accordion-base-colour;\n        background: $govuk-accordion-hover-colour;\n\n        .govuk-accordion__section-toggle-text {\n          color: $govuk-accordion-base-colour;\n        }\n\n        .govuk-accordion-nav__chevron {\n          color: $govuk-accordion-base-colour;\n          background: $govuk-accordion-base-colour;\n        }\n\n        .govuk-accordion-nav__chevron::after {\n          color: $govuk-accordion-hover-colour;\n        }\n      }\n\n      &:focus {\n        // Remove default focus border around button as styling is being applied\n        // to inner text elements that receive focus\n        outline: 0;\n\n        .govuk-accordion__section-heading-text-focus,\n        .govuk-accordion__section-summary-focus,\n        .govuk-accordion__section-toggle-focus {\n          @include govuk-focused-text;\n        }\n\n        .govuk-accordion-nav__chevron {\n          color: $govuk-accordion-base-colour;\n          background: $govuk-accordion-base-colour;\n        }\n\n        .govuk-accordion-nav__chevron::after {\n          color: $govuk-accordion-icon-focus-colour;\n        }\n      }\n\n      // Remove default button focus outline in Firefox\n      &::-moz-focus-inner {\n        padding: 0;\n        border: 0;\n      }\n    }\n\n    // Remove the transparent border when the section is expanded to make it\n    // clear that the heading relates to the content below. Adjust padding to\n    // maintain the height of the element. See\n    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798\n    .govuk-accordion__section--expanded .govuk-accordion__section-button {\n      padding-bottom: govuk-spacing(3);\n      border-bottom: 0;\n\n      @media #{govuk-from-breakpoint(tablet)} {\n        padding-bottom: govuk-spacing(4);\n      }\n    }\n\n    // As Chevron icon is vertically aligned it overlaps with the focus state\n    // bottom border – this adds some spacing\n    .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {\n      padding-bottom: 3px;\n\n      @media #{govuk-from-breakpoint(desktop)} {\n        padding-bottom: 2px;\n      }\n    }\n\n    .govuk-accordion__section-toggle,\n    .govuk-accordion__section-heading-text,\n    .govuk-accordion__section-summary {\n      display: block;\n      margin-bottom: 13px;\n\n      .govuk-accordion__section-heading-text-focus,\n      .govuk-accordion__section-summary-focus,\n      .govuk-accordion__section-toggle-focus {\n        display: inline;\n      }\n    }\n\n    // Add toggle link with Chevron icon on left.\n    .govuk-accordion__section-toggle {\n      @include govuk-font-size($size: 19);\n      @include govuk-typography-weight-regular;\n      color: govuk-functional-colour(link);\n    }\n\n    // Add space between the icon and text. Avoid applying spacing directly to\n    // the icon as the use of `transform` will change the placement of any\n    // margins.\n    .govuk-accordion__show-all-text,\n    .govuk-accordion__section-toggle-text {\n      margin-left: govuk-spacing(1);\n      vertical-align: middle;\n    }\n\n    // Background colour adjustment when user changes colours in Firefox\n    //\n    // When user changes colours in Firefox, text colour inside <button> is\n    // always black (regardless of the custom colours the user has set). This is\n    // fine when the text in the button is not nested inside another element\n    // because when user changes colours in Firefox, the immediate background\n    // colour of buttons is always white (again, regardless of user's custom\n    // colours).\n    //\n    // However, when the text inside <button> is wrapped inside another element\n    // AND that element sets a background colour, the text colour is still black\n    // but the background of that nested element gets the user's custom\n    // background colour. When the custom background is a lighter hue, the\n    // contrast might be sufficient. But if the user's custom background colour\n    // is a darker colour, the contrast with the text might not be sufficient.\n    //\n    // To ensure sufficient contrast, override the background colour set by the\n    // focus state on the nested elements to be transparent.\n    //\n    // Also override the background colour of the Show/Hide chevrons which set a\n    // background colour on hover.\n    @media screen and (forced-colors: active) {\n      .govuk-accordion__show-all:hover,\n      .govuk-accordion__section-button:hover {\n        .govuk-accordion-nav__chevron {\n          background-color: transparent;\n        }\n      }\n\n      .govuk-accordion__show-all:focus,\n      .govuk-accordion__section-button:focus {\n        .govuk-accordion__section-heading-text-focus,\n        .govuk-accordion__section-summary-focus,\n        .govuk-accordion__section-toggle-focus,\n        .govuk-accordion-nav__chevron {\n          background: transparent;\n          background-color: transparent;\n        }\n      }\n    }\n\n    // For devices that can't hover such as touch devices,\n    // remove hover state as it can be stuck in that state (iOS).\n    @media (hover: none) {\n      .govuk-accordion__section-header:hover {\n        border-top-color: govuk-functional-colour(border);\n\n        box-shadow: inset 0 3px 0 0 govuk-functional-colour(link);\n\n        .govuk-accordion__section-button {\n          border-top-color: govuk-functional-colour(border);\n        }\n      }\n    }\n  }\n}\n"]}