@import './../../styles/colors.scss';

h1 {
    font-size: 1.1rem;
    margin-bottom: calc(24 / 16 * 1rem);
}

h2 {
    font-weight: 600;
    font-size: 0.875rem;
}

.images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    grid-gap: 1rem;
    margin: 2rem 0 1rem;
    max-height: 45vh;
    overflow-y: scroll;
    overflow-x: clip;
    z-index: 1;
    position: relative;
}

.buttons-container {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1em 0;
}

.container {
    padding: 0.75rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 3px;
    box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
    background-color: #fff;
}

.browser {
    height: 8.667rem;
    font-weight: 800 !important;
    color: $disabled-grey !important;
    border: 1px solid $disabled-grey;
    background: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
    // animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
    background-size: 100%;
    background-position-y: 26.5px;

    &--filled {
        background-size: 100%;
        background-position-y: 26.5px;
        animation: none;

        .browser__header {
            background-color: #fff;

            &--addres-bar {
                background-color: #fff;
                animation: none;
            }
        }
    }

    @keyframes xray {
        to {
            background-position-y: 11.1rem;
        }
    }

    @keyframes xray-header {
        to {
            background-position-x: 11.1rem;
        }
    }

    &__header {
        height: 1.667rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        padding: 0 0.5rem;
        font-size: 1.25rem;
        border-bottom: 1px solid $disabled-grey;

        &--address-bar {
            border: 1px solid #8a949f;
            height: 1rem;
            width: 10rem;
            font-size: 0.667rem;
            font-weight: 400;
            padding: 0 0.25rem;
            color: #000;
            overflow: hidden;
            word-break: normal;
            inline-size: 10rem;
            text-overflow: ellipsis;

            background: linear-gradient(to left, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
            animation: xray-header 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
        }

        &--controls {
            padding-bottom: 0.25rem;
            font-weight: 900;
        }
    }

    &__content {
        height: 6.667rem;
    }
}