@use "govuk/base" as govuk;

.app-test-data-banner {
    background-color: govuk.govuk-colour("orange");

    &--container {
        padding: 15px 0;
        display: flex;
        flex-direction: row;
        align-items: center;

        @include govuk.govuk-media-query($until: tablet) {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }
    }
}

.app-test-data-banner__inverse {
    // https://github.com/alphagov/govuk-frontend/blob/b5884bcede951779c3e166f9bf3420f0e7f4ee4a/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss#L77
    box-shadow: 0 2px 0 #7a3c1c;

    // a darker button colour because the background contrast is too high
    color: #b7592a !important;
}

.app-test-data-banner__tag {
    color: white;
    flex-grow: 1;
}

.app-test-data-banner--standalone {
    margin-top: govuk.govuk-spacing(2);
    background-color: govuk.govuk-colour("orange");
    padding: 15px 15px;
}

.app-request-tracing-banner {
    background-color: govuk.govuk-colour("brown");

    &--container {
        padding: 7px 0;
        display: flex;
        flex-direction: row;
        align-items: center;

        @include govuk.govuk-media-query($until: tablet) {
            flex-direction: column;
            align-items: stretch;
            gap: 5px;
        }
    }
}

.app-request-tracing-banner__tag {
    color: white;
    flex-grow: 1;
}

.app-request-tracing-banner__link-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: white;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;

    &:hover {
        text-decoration: none;
    }

    &:focus {
        color: govuk.govuk-colour("black");
        background-color: govuk.govuk-colour("yellow");
        outline: 3px solid transparent;
        box-shadow:
            0 -2px govuk.govuk-colour("yellow"),
            0 4px govuk.govuk-colour("black");
        text-decoration: none;
    }
}
