@import "../../base";
@import "../../../govuk/objects/grid";

@include govuk-exports("idsk/component/footer-extended") {
    $govuk-footer-background: $govuk-canvas-background-colour;
    $govuk-footer-border: $govuk-border-colour;

    // This variable can be removed entirely once the legacy palette goes away,
    // as it'll just be the same as $govuk-footer-border.
    $govuk-footer-border-top: $govuk-border-colour;

    $grid-columns: 12;
    $grid-gutter-width: 30px;

    $grid-breakpoints: (
        // Extra small screen / phone
        xs: 0,
        // Small screen / phone
        sm: 576px,
        // Medium screen / tablet
        md: 768px,
        // Large screen / desktop
        lg: 992px,
        // Extra large screen / wide desktop
        xl: 1200px
    );

    $container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
    );

    .idsk-footer-extended {
        @include govuk-font($size: 16);
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        left: 100px;
        background: govuk-colour("light-grey");
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        font-style: normal;
        font-weight: 400;

        &.idsk-footer-extended--up-button-enabled {
            box-shadow: none;
        }
    }

    .idsk-footer-extended-inline-list {
        margin-top: 0;
        margin-bottom: govuk-spacing(3);
        padding-left: 0;
        padding-top: govuk-spacing(6);
        @include mq($from: tablet) {
            padding-top: govuk-spacing(5);
        }
    }

    .idsk-footer-extended-description-panel .idsk-footer-extended-inline-list-item {
        display: inline-block;
    }

    .idsk-footer-extended-inline-list-item {
        display: block;
        margin-right: govuk-spacing(3);
        margin-bottom: govuk-spacing(1);
    }

    .idsk-footer-extended-list-item {
        display: block;
        margin-bottom: govuk-spacing(3);
    }

    .idsk-footer-extended-description-panel-top-border {
        border-top: 1px solid govuk-colour("mid-grey");
    }

    .idsk-footer-extended-subtitle {
        border-top: 1px solid govuk-colour("mid-grey");
        padding-top: 7px;
    }

    #idsk-footer-extended-close-error-form-button:hover,
    #idsk-footer-extended-close-help-form-button:hover {
        color: govuk-colour("black");
    }

    .idsk-footer-extended-meta-item {
        margin-right: govuk-spacing(3);
        margin-bottom: govuk-spacing(1);
        margin-left: 0;
    }

    .idsk-footer-extended-logo {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        -ms-flex-item-align: end;
            align-self: flex-end;
        -ms-flex-positive: 0;
            flex-grow: 0;
        margin: govuk-spacing(6) 0;
        width: 100%;
        max-width: 250px;

        & img,
        & svg {
            height: 100%;
            max-height: 150px;
            width: 100%;
        }
    }

    .idsk-footer-extended-frame {
        display: inline-block;
        width: 100%;
        height: 15px;
        left: 0;
        top: 0;
        color: govuk-colour("black");
        @include mq($from: tablet) {
            width: 90%;
        }
    }

    .idsk-footer-extended-label {
        font-style: normal;
        font-weight: 300;
        color: govuk-colour("black");
        text-decoration: underline;
    }

    .idsk-footer-extended-grid-column {
        padding-bottom: 23px;
    }

    .idsk-footer-extended-main-content {
        width: 100%;

        .govuk-grid-column-one-half {
            padding: 0;
        }

        ul {
            padding-left: 0;
        }

        .govuk-grid-column-one-third {
            padding-left: 0;

            @include mq($from: tablet) {
                padding-left: govuk-spacing(4);
            }
        }
    }

    .idsk-footer-extended .govuk-heading-m {
        padding-top: govuk-spacing(3);
        @include mq(tablet) {
            font-size: 1.39em;
        }
        @include mq($from: desktop) {
            font-size: 1.5em;
        }
    }

    .idsk-footer-extended-feedback-content {
        background-color: govuk-colour("white");
        width: 100%;
        border-top: 5px solid govuk-colour("blue");
        border-bottom: 5px solid govuk-colour("blue");
        background-clip: border-box;
        background-color: govuk-colour("white");
        @include mq($from: desktop) {
            border-top: 10px solid govuk-colour("blue");
            border-bottom: 10px solid govuk-colour("blue");
        }
    }

    .idsk-footer-extended-feedback {
        width: 100%;
        background: govuk-colour("blue");
    }

    #idsk-footer-extended-feedback {
        margin: 0 -15px;
        @include mq($from: tablet) {
            height: 70px;
        }

        @media screen and (min-width: 670px) {
            @include govuk-font($size: 16);
        }

        @include mq($from: desktop) {
            @include govuk-font($size: 19);
        }
    }

    .idsk-footer-extended-feedback-text {
        font-style: normal;
        color: govuk-colour("white");
        @include mq($from: desktop) {
            @include govuk-font($size: 19);
        }
    }

    #idsk-footer-extended-feedback-yes-button,
    #idsk-footer-extended-feedback-no-button {
        font-weight: bold;
    }

    .idsk-footer-extended-feedback-text-answers {
        font-style: normal;
        font-weight: normal;
        color: govuk-colour("white");

        @include mq($from: tablet) {
            @include govuk-font($size: 16);
        }

        @include mq($from: desktop) {
            @include govuk-font($size: 19);
        }
    }

    .idsk-footer-extended-logo:focus,
    .idsk-footer-extended-logo:active {
        @include govuk-focused-text;
    }

    .idsk-footer-extended-logo-box {
        text-align: -webkit-center;
        padding-right: 0;
    }

    _:-ms-fullscreen,
    :root .idsk-footer-extended-logo-box {
        margin-top: -26px;
    }

    .idsk-footer-extended-info-links {
        @include mq(tablet) {
            width: 57%;
        }
        @include mq($from: desktop) {
            width: 66.6666%;
        }
    }

    .idsk-footer-extended-feedback-container.collapsed {
        max-height: 0;
    }

    .idsk-footer-extended-feedback-button {
        text-align: center;
        color: govuk-colour("blue");
        @include mq($from: tablet) {
            text-align: left;
        }
    }

    .idsk-footer-extended-close-button {
        padding-top: govuk-spacing(3);
    }

    .idsk-footer-extended-help-button {
        background: none;
        border-style: none;
        text-decoration: underline;
        cursor: pointer;
    }

    #idsk-footer-extended-error-button {
        padding: 0;
        float: right;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;

        @media screen and (min-width: 641px) {
            float: unset;
        }
    }

    #idsk-footer-extended-feedback-yes-button:focus,
    #idsk-footer-extended-feedback-no-button:focus,
    #idsk-footer-extended-error-button:focus,
    .idsk-footer-extended-help-button:focus {
        @include govuk-focused-text;
    }

    .idsk-footer-extended-form-text {
        font-style: normal;
        font-weight: 300;
        color: govuk-colour("black");
    }

    .idsk-footer-extended-display-none {
        display: none;
    }

    .idsk-footer-extended-display-hidden {
        visibility: hidden;
    }

    .idsk-footer-extended-feedback-hidden {
        max-height: 0;
        -webkit-transition: max-height 0.1s ease-out;
        transition: max-height 0.1s ease-out;
    }

    .idsk-footer-extended-open {
        max-height: 619px;
        height: auto;
        -webkit-transition: max-height 0.7s ease-in;
        transition: max-height 0.7s ease-in;
        overflow: hidden;
    }

    .idsk-footer-extended-feedback-question-info-usefull {
        display: none;
        @include mq($from: tablet) {
            display: inline;
        }
    }

    .idsk-footer-extended-usefull-question-mobile {
        display: revert;
        line-height: 45px;
        @include mq($from: tablet) {
            display: none;
        }
    }

    .idsk-footer-extended-white-border {
        border-top: 2px solid govuk-colour("white");
        @include mq($from: tablet) {
            border-top: none;
        }
    }

    .idsk-footer-extended-feedback-question-container {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        width: -webkit-fill-available;
    }

    .idsk-footer-extended-help-form-header-mobile {
        padding: 0;
    }

    #idsk-footer-extended-heart {
        text-align: center;
        @include mq($from: tablet) {
            text-align: left;
        }
    }

    .idsk-footer-extended .idsk-button {
        width: auto;
    }

    #idsk-footer-extended-close-help-form-button,
    #idsk-footer-extended-close-error-form-button {
        float: right;
        margin-top: -3px;
    }

    .idsk-footer-extended-write-us-button {
        float: right;
        padding-top: govuk-spacing(3);
    }

    .idsk-footer-extended-feedback-question-container .govuk-grid-column-one-third {
        padding-right: 0;
    }

    .idsk-footer-extended-close-button-mobile {
        width: 25%;
        padding-top: govuk-spacing(4);
        display: inline;
        @media screen and (min-width: 600px) {
            width: 50%;
        }
    }

    .idsk-footer-extended-close-button-tablet {
        display: none;
        @include mq($from: tablet) {
            display: inline;
            padding-top: 19px;
        }
    }

    .idsk-footer-extended-usefull-answers-mobile {
        float: right;
        padding-top: 13px;

        @include mq(tablet) {
            padding-top: 0;
        }

        @media screen and (min-width: 868px) {
            padding-right: 5%;
        }

        @media screen and (min-width: 1200px) {
            padding-right: 12%;
        }
    }

    @include mq($from: tablet) {
        _:-ms-fullscreen,
        :root .idsk-footer-extended-usefull-answers-mobile {
            display: inline;
        }

        .idsk-footer-extended {
            margin-right: 0;
        }
    }

    .idsk-footer-extended-display-hidden .idsk-footer-extended-feedback-container {
        max-height: 0;
    }

    .idsk-footer-extended-feedback-container {
        overflow: hidden;
        padding: 0;

        @include mq($from: tablet) {
            margin: 0;
            padding: govuk-spacing(5) 0;
        }
    }

    #idsk-footer-extended-help-form .idsk-button {
        margin-top: govuk-spacing(3);
        width: auto;
    }

    .idsk-footer-extended-feedback-container .govuk-textarea:focus {
        width: 98%;
        margin-left: 3px;
        @include mq($from: tablet) {
            margin-left: 0;
            width: 100%;
        }
    }

    .idsk-footer-extended-feedback-container .govuk-select:focus {
        margin-left: 3px;
        @include mq($from: tablet) {
            margin-left: 0;
        }
    }

    .idsk-footer-extended-main-content .govuk-grid-column-two-thirds,
    .idsk-footer-extended-main-content .govuk-grid-column-full {
        padding: 0;
    }

    .idsk-footer-extended-description-panel .govuk-grid-column-two-thirds {
        @include mq($from: tablet) {
            padding: 0;
        }
    }

    .idsk-footer-extended-heart {
        display: none;
    }

    .idsk-footer-extended-heart-visible {
        @include govuk-font($size: 24);
        font-weight: bold;
        display: block;
        line-height: 40px;

        @include mq($from: tablet) {
            @include govuk-font($size: 19);
            margin-top: -5px;
            font-weight: bold;
        }
    }

    .idsk-footer-extended-heart--svg {
        display: none;

        @include mq($from: desktop) {
            display: unset;
            margin-bottom: -2px;
        }
    }

    .idsk-footer-extended-answers-form {
        float: right;
        @include mq($from: desktop) {
            padding-right: 15%;
        }
    }

    .idsk-footer-extended-feedback-container .govuk-textarea,
    .idsk-footer-extended-feedback-container .govuk-hint,
    .idsk-footer-extended-feedback-container .govuk-label,
    .idsk-footer-extended-feedback-container .govuk-select {
        font-weight: 300;
        @include govuk-font($size: 16);
    }

    #idsk-footer-extended-close-help-form-button,
    #idsk-footer-extended-close-error-form-button {
        @include govuk-font($size: 14);
    }

    .idsk-footer-extended-feedback button,
    .idsk-footer-extended-feedback-question-info-usefull {
        @include govuk-font($size: 14);
        font-size: 14px;

        @media screen and (min-width: 670px) {
            @include govuk-font($size: 16);
        }
        @include mq(desktop) {
            @include govuk-font($size: 19);
        }
    }

    .idsk-footer-extended-up-button-div {
        height: 40px;
        width: 100%;
        background-color: govuk-colour("white");
        @include govuk-media-query($from: tablet) {
            height: 45px;
            @supports (-moz-appearance:none) {
                height: 44px;
            }
        }
    }

    .idsk-footer-extended-up-button-a {
        float: right;
    }

    .idsk-footer-extended__up-button-svg {
        padding: govuk-spacing(1) govuk-spacing(1) 0 0;
    }

    .idsk-footer-extended .govuk-link {
        &:link {
            color: govuk-colour("black");
        }
        &:visited {
            color: $govuk-link-visited-colour;
        }
        &:hover {
            color: $govuk-link-hover-colour;
        }
        &:active {
            color: govuk-colour("black");
        }
    }

    #footer-extended-up-button {
        display: none;
    }

    @-webkit-keyframes blinker {
        50% {
            opacity: 0;
        }
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }

    .idsk-footer-extended__feedback-info{
        display: none;
    }
}