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

@include govuk-exports("idsk/component/feedback") {
    .idsk-feedback__content {
        @include govuk-font($size: 19);
    }

    .idsk-feedback__content .govuk-radios {
        line-height: 0;
    }

    .idsk-feedback__content .govuk-heading-l {
        padding-bottom: govuk-spacing(8);
        margin-bottom: 0;
    }

    .idsk-feedback__buttons {
        padding-top: govuk-spacing(2);
    }

    @include mq($from: desktop) {
        .idsk-feedback__content .govuk-radios .govuk-radios__input:hover + .govuk-radios__label::before {
            box-shadow: 0 0 0 10px govuk-colour("mid-grey");
        }

        .idsk-feedback__content
            .govuk-radios
            .govuk-radios__item:hover
            .govuk-radios__input:focus
            + .govuk-radios__label::before {
            box-shadow: 0 0 0 4px govuk-colour("yellow"), 0 0 0 10px govuk-colour("mid-grey");
        }

        .idsk-feedback__content .govuk-radios__label {
            padding-left: 0;
        }

        .idsk-feedback__content .govuk-radios__label::before {
            top: 8px;
            width: 24px;
            height: 24px;
        }

        .idsk-feedback__content .govuk-radios__label::after {
            top: 15px;
            left: 7px;
            border-width: 5px;
        }
    }

    .idsk-feedback__buttons .govuk-button {
        width: auto;
    }

    #idsk-feedback__question-bar {
        padding-top: govuk-spacing(6);
    }

    #idsk-feedback__question-bar .govuk-heading-m {
        margin-bottom: -10px;
    }

    .idsk-feedback__subtitle {
        margin-bottom: govuk-spacing(6);
    }

    #idsk-feedback__send-button {
        margin-right: govuk-spacing(4);
    }

    .idsk-feedback--hidden {
        display: none;
    }

    .idsk-feedback--invisible {
        visibility: hidden;
    }

    .idsk-feedback--animation {
        max-height: 0;
        -webkit-transition: max-height 0.7s ease-out;
        transition: max-height 0.7s ease-out;
    }

    #idsk-feedback__question-bar .govuk-textarea {
        height: 150px;

        @include mq($from: desktop) {
            height: 115px;
        }
    }

    #idsk-feedback__question-bar .govuk-textarea:focus {
        width: 97%;
        margin-left: 3px;

        @include mq($from: desktop) {
            width: 99%;
        }
    }

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