/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_openinghours/Partials/Place/OpenGemeentenOpeningHours-Place.css
 * - opengemeenten_openinghours/Partials/Location/OpenGemeentenOpeningHours-Location.css
 * - opengemeenten_linkhandling/Partials/Button/OpenGemeentenLinkHandling-Button.css

 *
 * Variables can be set there globally or override them here!
 */

.opening-hours-spotlight {
    --font-size: var(--root-font-size); /* Reset: use REM */
}

.opening-hours-spotlight__visual {
    --border-width: 0;
    /*--color-border: var(--root-color-border);*/
}

.opening-hours-spotlight__header {
    --color: var(--root-color--secondary);
    --font-family: var(--root-heading-2-family);
    --font-size: var(--root-heading-2-size);
    --font-style: var(--root-heading-2-style);
    --font-weight: var(--root-heading-2-weight);
    --line-height: var(--root-heading-2-line-height);
}

.opening-hours-spotlight .button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--border-radius: var(--root-border-radius);*/
    /*--border-style: solid;*/
    /*--border-top-width: var(--root-border-width);*/
    /*--border-right-width: var(--root-border-width);*/
    /*--border-bottom-width: var(--root-border-width);*/
    /*--border-left-width: var(--root-border-width);*/
    /*--color: var(--root-color--white);*/
    /*--font-weight: var(--root-font-weight--bold);*/
}

.opening-hours-spotlight .button:active,
.opening-hours-spotlight .button:focus,
.opening-hours-spotlight .button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

/* Primary */
.section--color-primary .opening-hours-spotlight__visual {
    /*--color-border: var(--root-color--lighten);*/
}

.section--color-primary .opening-hours-spotlight__header {
    --color: var(--root-color--white);
}

.section--color-primary.opening-hours-spotlight .opening-times__item__location {
    --color: var(--root-color--white);
}

.section--color-primary.opening-hours-spotlight .opening-times__item__description {
    --color: var(--root-color--white);
}

.section--color-primary.opening-hours-spotlight .opening-times__item__description a {
    /*--border-color: var(--root-color-text);*/
    --color: var(--root-color--white);
}

.section--color-primary.opening-hours-spotlight .opening-times__item__description a:focus,
.section--color-primary.opening-hours-spotlight .opening-times__item__description a:hover {
    --color: var(--root-color--white-dark);
}

.section--color-primary.opening-hours-spotlight .opening-hours {
    --color: var(--root-color--white);
}

.section--color-primary.opening-hours-spotlight .button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.section--color-primary.opening-hours-spotlight .button:active,
.section--color-primary.opening-hours-spotlight .button:focus,
.section--color-primary.opening-hours-spotlight .button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

/* Secondary */
.section--color-secondary .opening-hours-spotlight__visual {
    /*--color-border: var(--root-color--lighten);*/
}

.section--color-secondary .opening-hours-spotlight__header {
    --color: var(--root-color--white);
}

.section--color-secondary.opening-hours-spotlight .opening-times__item__location {
    --color: var(--root-color--white);
}

.section--color-secondary.opening-hours-spotlight .opening-times__item__description {
    --color: var(--root-color--white);
}

.section--color-secondary.opening-hours-spotlight .opening-times__item__description a {
    /*--border-color: var(--root-color-text);*/
    --color: var(--root-color--white);
}

.section--color-secondary.opening-hours-spotlight .opening-times__item__description a:focus,
.section--color-secondary.opening-hours-spotlight .opening-times__item__description a:hover {
    --color: var(--root-color--white-dark);
}

.section--color-secondary.opening-hours-spotlight .opening-hours {
    --color: var(--root-color--white);
}

.section--color-secondary.opening-hours-spotlight .button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.section--color-secondary.opening-hours-spotlight .button:active,
.section--color-secondary.opening-hours-spotlight .button:focus,
.section--color-secondary.opening-hours-spotlight .button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

/* Suppport */
.section--color-support .opening-hours-spotlight__visual {
    /*--color-border: var(--root-color--darken);*/
}

.section--color-support .opening-hours-spotlight__header {
    /*--color: var(--root-color--secondary);*/
}

.section--color-support.opening-hours-spotlight .opening-times__item__location {
    /*--color: var(--root-color-text);*/
}

.section--color-support.opening-hours-spotlight .opening-times__item__description {
    /*--color: var(--root-color-text);*/
}

.section--color-support.opening-hours-spotlight .opening-times__item__description a {
    /*--border-color: var(--root-color-text);*/
    /*--color: var(--root-color-text-link);*/
}

.section--color-support.opening-hours-spotlight .opening-times__item__description a:focus,
.section--color-support.opening-hours-spotlight .opening-times__item__description a:hover {
    /*--color: var(--root-color-text-link--hover);*/
}

.section--color-support.opening-hours-spotlight .opening-hours {
    /*--color: var(--root-color-text);*/
}

.section--color-support.opening-hours-spotlight .button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.section--color-support.opening-hours-spotlight .button:active,
.section--color-support.opening-hours-spotlight .button:focus,
.section--color-support.opening-hours-spotlight .button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

/* Grey */
.section--color-grey .opening-hours-spotlight__visual {
    /*--color-border: var(--root-color--darken);*/
}

.section--color-grey .opening-hours-spotlight__header {
    /*--color: var(--root-color--secondary);*/
}

.section--color-grey.opening-hours-spotlight .opening-times__item__location {
    /*--color: var(--root-color-text);*/
}

.section--color-grey.opening-hours-spotlight .opening-times__item__description {
    /*--color: var(--root-color-text);*/
}

.section--color-grey.opening-hours-spotlight .opening-times__item__description a {
    /*--border-color: var(--root-color-text);*/
    /*--color: var(--root-color-text-link);*/
}

.section--color-grey.opening-hours-spotlight .opening-times__item__description a:focus,
.section--color-grey.opening-hours-spotlight .opening-times__item__description a:hover {
    /*--color: var(--root-color-text-link--hover);*/
}

.section--color-grey.opening-hours-spotlight .opening-hours {
    /*--color: var(--root-color-text);*/
}

.section--color-grey.opening-hours-spotlight .button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.section--color-grey.opening-hours-spotlight .button:active,
.section--color-grey.opening-hours-spotlight .button:focus,
.section--color-grey.opening-hours-spotlight .button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

.opening-hours-spotlight {
    overflow: hidden;
}

.opening-hours-spotlight__visual {
    display: block;
}

.opening-hours-spotlight__image {
    height: auto;
    width: 100%;
    vertical-align: top;
}

.opening-times__item {
    margin-top: 1rem;
}

.opening-times__item * {
    margin: 0;
}

@media (max-width: 61.999rem) {
    .opening-hours-spotlight.section--color:not(.section--no-padding) {
        padding-top: 0;
    }

    .opening-hours-spotlight > .flow {
        padding-left: 0;
        padding-right: 0;
    }

    .opening-hours-spotlight .opening-hours-spotlight__content {
        padding-top: 3rem;
    }
}

@media (max-width: 47.999rem) {
    .opening-hours-spotlight {
        padding-bottom: 2rem;
    }

    .opening-hours-spotlight .opening-hours-spotlight__content {
        padding-top: 2rem;
    }
}

@media (min-width: 62rem) {
    .opening-hours-spotlight {
        min-height: 20em;
    }

    .opening-hours-spotlight:not(.section--color) {
        min-height: 13.944em;
    }

    .opening-hours-spotlight,
    .opening-hours-spotlight > .flow,
    .opening-hours-spotlight .opening-hours-spotlight__content {
        display: flex;
    }

    .opening-hours-spotlight .opening-hours-spotlight__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .opening-hours-spotlight > .flow,
    .opening-hours-spotlight .opening-hours-spotlight__container,
    .opening-hours-spotlight .opening-hours-spotlight__content {
        width: 100%;
    }

    .opening-hours-spotlight__visual {
        border-left-style: solid;
        grid-column: 2;
        grid-row: 1;
        padding-left: 2rem;
    }

    .opening-hours-spotlight__flow {
        padding-left: 0;
        padding-right: 2rem;
    }
}

.opening-hours-spotlight {
    font-size: var(--font-size, 1rem);
}

.opening-hours-spotlight__header {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.777em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    color: var(--color, black);
    line-height: var(--line-height, 1.25);
}

.opening-hours-spotlight__text {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    color: var(--color, black);
}

@media (min-width: 62rem) {
    .opening-hours-spotlight__visual {
        border-left-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
        border-left-width: var(--border-width, 0.063rem);
    }
}