@use './src/styles/screen' as *;
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;

:host {
    display: block;
    padding-top: 1rem;

    section {
        width: 100%;
        margin: auto;
        display: flex;
        @include v-spacing(2rem);
        @include h-spacing(2rem);
        padding: 2rem;

        @include desktop() {
            padding-top: 3rem;
            max-width: 960px;
            width: 75%;
        }

        .error-page {
            &-girl {
                flex: 30%;
                background-image: url('~src/assets/img/lady404.png');
                background-position: bottom;
                background-repeat: no-repeat;
                background-size: contain;
                margin-bottom: -2rem;

                @include mobile() {
                    display: none;
                }
            }

            &-code {
                font-size: 8rem;
                color: #a3a3a3;
            }

            &-title {
                font-size: 3rem;
                color: $text-color;
            }

            &-search {
                width: 100%;

                @include desktop() {
                    width: 17rem;
                }

                margin-bottom: 1rem;

                &-control {
                    position: relative;

                    &-icon {
                        position: absolute;
                        top: 0;
                        right: 0;
                        background: no-repeat;
                        background-image: url('~src/assets/img/icon--search.svg');
                        width: 2.25rem;
                        height: 2.25rem;
                        background-position: center;
                        cursor: pointer;

                        &:hover {
                            background-image: url('~src/assets/img/icon--search-blue.svg');
                        }
                    }
                }

                input {
                    font-size: 0.875rem;
                    box-sizing: border-box;
                    width: 100%;
                    height: 2.25rem;
                    padding: 0.25rem 0.5rem;
                    border: 1px solid #dfdfdf;
                    background: #fff;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    transition: all 0.2s;
                    outline: 0 solid transparent;
                    border-radius: 0.1875rem;
                    position: relative;
                    top: 0;
                    left: 0;

                    &:focus {
                        border: 1px solid #b7d3f3;
                        box-shadow: 0 0.0625rem 0.1875rem #cad6e5;
                    }
                }
            }

            &-content {
                flex: 70%;
                @include v-spacing(1rem);

                @include mobile() {
                    flex: 100%;
                }
            }

            &-actions {
                display: flex;
                padding: 2rem 0;
                flex-wrap: wrap;

                @include gt-mobile() {
                    @include h-spacing(1rem);
                }

                @include mobile() {
                    flex-wrap: wrap;
                    @include v-spacing(1rem);
                }

                a {
                    height: 35px;
                    display: flex;
                    align-items: center;

                    ::ng-deep .p-button-label {
                        font-size: 1rem;
                    }



                    @include mobile() {

                        &[name='buy-ticket'] {
                            justify-content: center;
                            flex: 100%;
                        }

                        justify-content: space-between;
                    }
                }
            }
        }
    }
}
