@import "../../../../assets/scss/abstracts/variables";
@import "../../../../assets/scss/abstracts/mixins";

@property --color-rdg-injury-report-pagination {syntax: "<color>"; inherits: true; initial-value: #111111;}
@property --color-rdg-injury-report-pagination-border {syntax: "<color>"; inherits: true; initial-value: #E5E5E5;}
@property --color-rdg-injury-report-pagination-border-active {syntax: "<color>"; inherits: true; initial-value: #88c0f9;}
@property --color-rdg-injury-report-pagination-bg {syntax: "<color>"; inherits: true; initial-value: #F6F7F8;}
@property --color-rdg-injury-report-pagination-hover {syntax: "<color>"; inherits: true; initial-value: #f75858;}
@property --color-rdg-injury-report-pagination-hover-c {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-rdg-injury-report-injury {syntax: "<color>"; inherits: true; initial-value: #111111;}
@property --color-rdg-injury-report-injury-odd {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-rdg-injury-report-injury-even {syntax: "<color>"; inherits: true; initial-value: #F6F7F8;}

:root {
    --breakpoint-sm: 576;
    --breakpoint-md: 768;
    --breakpoint-lg: 992;
    --breakpoint-xl: 1200;
    --breakpoint-xxl: 1600;
}

.rdg-blocks .rdg-injury-report {
    .preview-thumbs {
        background-image: url('../images/rdg-injury-report-template-preview.jpg');
    }

    width: calc(var(--vw, 1vw) * 100);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 99.55vw;

    .container.content {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;

        @include title;

        .filter {
            display: flex;
            margin-bottom: 1.2rem;
            gap: 1rem;

            @media (max-width: $breakpoint-md) {
                & {
                    flex-direction: column;
                }
            }

            .search {
                width: 40%;

                @media (max-width: $breakpoint-lg) {
                    & {
                        width: 30%;
                    }
                }

                @media (max-width: $breakpoint-md) {
                    & {
                        width: 100%;
                    }
                }

                #search {
                    width: 100%;
                }
            }

            .options {
                width: 60%;
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;

                @media (max-width: $breakpoint-lg) {
                    & {
                        width: 70%;
                    }
                }

                @media (max-width: $breakpoint-md) {
                    & {
                        width: 100%;
                        justify-content: center;
                    }
                }
            }

            input, select {
                margin: 0;
                border-radius: 23px;
                height: 46px;
                box-sizing: border-box;
                border: 1px solid var(--color-rdg-injury-report-pagination-border);
                background-color: var(--color-rdg-injury-report-pagination-bg);
            }

            input {
                padding: 12px 20px;
            }
        }

        .results {
            display: flex;
            flex-wrap: wrap;
            gap: .3rem;
            margin-bottom: 1.2rem;

            a {
                padding: .3rem .7rem;
                border-radius: 23px;
                border: 1px solid var(--color-rdg-injury-report-pagination-border);
                transition: .2s all;

                &:hover {
                    background-color: var(--color-rdg-injury-report-pagination-hover);
                    color: var(--color-rdg-injury-report-pagination-hover-c);
                    cursor: pointer;
                }
            }
        }

        .injuries {
            display: flex;
            flex-direction: column;
            border-radius: 18px;
            border: 1px solid var(--color-rdg-injury-report-pagination-border);
            overflow: hidden;
            margin-bottom: 2rem;

            .injury {
                display: flex;
                flex-direction: column;
                padding: 1.5rem;
                gap: 0.7rem;
                color: var(--color-rdg-injury-report-injury);
                border-bottom: 1px solid var(--color-rdg-injury-report-pagination-border);

                @media (max-width: $breakpoint-sm) {
                        & {
                            padding: .8rem;
                        }
                    }

                &:nth-child(odd) {
                    background-color: var(--color-rdg-injury-report-injury-odd);
                }

                &:nth-child(even) {
                    background-color: var(--color-rdg-injury-report-injury-even);
                }

                &:last-of-type {
                    border-bottom: none;
                }

                .content {
                    display: flex;

                    @media (max-width: $breakpoint-md) {
                        & {
                            flex-direction: column;
                            gap: .5rem;
                        }
                    }

                    .location {
                        width: 15%;

                        @media (max-width: $breakpoint-lg) {
                            & {
                                width: 25%;
                            }
                        }

                        @media (max-width: $breakpoint-md) {
                            & {
                                width: 100%;
                            }
                        }
                    }

                    .start-date {
                        width: 17%;

                        @media (max-width: $breakpoint-xl) {
                            & {
                                width: 20%;
                            }
                        }

                        @media (max-width: $breakpoint-lg) {
                            & {
                                width: 25%;
                            }
                        }

                        @media (max-width: $breakpoint-md) {
                            & {
                                width: 100%;
                            }
                        }
                    }

                    .status {
                        width: 15%;

                        @media (max-width: $breakpoint-lg) {
                            & {
                                width: 25%;
                            }
                        }

                        @media (max-width: $breakpoint-md) {
                            & {
                                width: 100%;
                            }
                        }
                    }

                    .display-status {
                        width: 20%;

                        @media (max-width: $breakpoint-lg) {
                            & {
                                width: 25%;
                            }
                        }

                        @media (max-width: $breakpoint-md) {
                            & {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }

        .pagination-result {
            display: flex;
            justify-content: center;
            gap: .3rem;
            flex-wrap: wrap;

            & a, & span {
                display: flex;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                align-items: center;
                justify-content: center;
                color: var(--color-rdg-injury-report-pagination);
                background-color: var(--color-rdg-injury-report-pagination-bg);
                border: 1px solid var(--color-rdg-injury-report-pagination-border);
                
                @media (max-width: $breakpoint-md) {
                    & {
                        height: 30px;
                        width: 30px;
                        border-radius: 15px;
                    }
                }
                
                &.current {
                    border: 1px solid var(--color-rdg-injury-report-pagination-border-active);
                    background-color: var(--color-rdg-injury-report-pagination-bg);
                    cursor: default;
                }

                &.next, &.prev {
                    width: auto;
                    padding: .6rem .6rem;
                }
            }
        }

        .message {
            color: var(--color-rdg-injury-report-pagination-hover);
            text-align: center;
            margin-bottom: 1.5rem;
        }
    }
}

.acf-block-preview {
    .rdg-injury-report {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
