/**
 *     __                         __
 *    / /_  _________ _____  ____/ /_____________
 *   / __ \/ ___/ __ `/ __ \/ __  / ___/ ___/ __ \
 *  / /_/ / /  / /_/ / / / / /_/ / /  / /__/ /_/ /
 * /_.___/_/   \__,_/_/ /_/\__,_/_/   \___/\____/
 *
 * Designed + Developed
 * by Kaleb Heitzman
 * https://brandr.co
 *
 * (c) 2016
 */


// Sizes
$mobile-size: 480px;
$tablet-size: 768px;
$desktop-size: 1124px;
$largedesktop-size: 1824px;

// Margins and Widths
$common-margin-right: 2.35%;

$calendar-table-width: 55%;
$calendar-details-width: 100% - $common-margin-right - $calendar-table-width;

$calendar-event-item-left-column-width: 25%;
$calendar-event-item-right-column-width: 100% - $common-margin-right - $calendar-event-item-left-column-width;

$events-event-left-column-width: 15%;
$events-event-right-column-width: 100% - $common-margin-right - $events-event-left-column-width;

$event-listing-width: 55%;
$event-sidebar-width: 100% - $common-margin-right - $event-listing-width;

$events-sidebar-list-item-time-width: 15%;
$events-sidebar-list-item-a-width: 100% - $common-margin-right - $events-sidebar-list-item-time-width;

// Bourbon Neat Breakpoints
$mobile: new-breakpoint(min-width $mobile-size 4);
$tablet: new-breakpoint(min-width $tablet-size 12);
$desktop: new-breakpoint(min-width $desktop-size 12);
$largedesktop: new-breakpoint(min-width $largedesktop-size 16);

/* colors taken from antimatter theme */

// calender specific variables
$calendar-control-button-bg:			#efefef !default;
$calendar-control-button-color:			#222222 !default;
$calendar-headings-bg:					transparent !default;
$calendar-headings-color:				#222222 !default;
$calendar-day-bg:						#efefef !default;
$calendar-day-color:					#222222 !default;
$calendar-day-current-bg:				#1BB3E9 !default;
$calendar-day-current-color:			#ffffff !default;
$calendar-day-block-bg:					#efefef !default;
$calendar-event-link-color:				#222222 !default;

// event(s) specific variables
$event-item-border:						1px solid #efefef !default;
$event-image-border-radius: 			3px !default;
$event-button-bg:						#1BB3E9 !default;
$event-button-color:					#ffffff !default;
$event-button-border:					2px solid $event-button-color !default;
$event-button-hover-color:				#fff !default;
$event-button-hover-bg:					$event-button-color !default;
$event-button-hover-border:				2px solid $event-button-color !default;
$event-button-border-radius:			4px !default;
$event-button-padding:					0.5rem 2rem;
$event-border-radius:					4px !default;
$event-locationpin-color:               #898d94;
$event-locationpin-dot-color:           #50596c;
$event-separator-border-bottom:         1px solid #efefef;;


@mixin location-pin($pin-color: $event-locationpin-color) {
    span.location-pin {
        width: .8em;
        height: .8em;
        border-radius: 50% 50% 50% 0;
        background-color: $pin-color;
        display: inline-block;
        transform: rotate(-45deg);
        margin: .2em .05em 0;

        &:after {
            content: '';
            width: .374em;
            height: .374em;
            margin: .214em 0 0 .214em;
            background: $event-locationpin-dot-color;
            position: absolute;
            border-radius: 50%;
        }
    }

    a span.location-pin {
        opacity: .75;
    }
}

/* html5 .calendar-hide */
.calendar-hide {
    display: none;
}


/* html5 .calendar-container element for calendar.html.twig */
.calendar-container {
    display: inline-block;
    width: 100%;

    a {
        transition: 0.2s;
    }

    .calendar-table {
        @media screen and (min-width: $tablet-size) {
            float: left;
            display: block;
            margin-right: $common-margin-right;
            width: $calendar-table-width;
        }

        table {
            font-family: sans-serif;

            thead {
                .calendar-controls {
                    .calendar-buttons {
                        font-size: 1em;
                        text-align: center;

                        a {
                            border-radius: 1.5rem;
                            background-color: $calendar-control-button-bg;
                            color: $calendar-control-button-color;
                            display: inline-block;
                            line-height: 1.5rem;
                            margin: 0.25rem 0.05em;
                            text-align: center;
                            width: 1.5rem;

                            &:hover {
                                color: $calendar-control-button-color;
                                background-color: shade($calendar-control-button-bg, 10);
                                transition: background-color 0.15s ease;
                            }
                        }
                    }

                    .calendar-title {
                        font-size: 1.25em;
                        text-align: center;
                    }
                }

                .calendar-headings {
                    th {
                        background: $calendar-headings-bg;
                        color: $calendar-headings-color;
                        font-size: 0.75rem;
                        line-height: 2.5;
                        text-align: center;
                        width: 1/7 * 100%; /* for 7 columns with same width */
                    }
                }
            }

            tbody {
                tr {
                    td {
                        padding: .45rem;
                        vertical-align: top;

                        div {
                            font-size: 0.75rem;
                            position: relative;
                            text-align: center;

                            .calendar-day {
                                &.calendar-active {
                                    color: $calendar-day-current-bg;
                                }

                                a {
                                    border-radius: 2.5rem;
                                    background: $calendar-day-bg;
                                    color: $calendar-day-color;
                                    display: inline-block;

                                    &:hover, &.calendar-active {
                                        background: $calendar-day-current-bg;
                                        color: $calendar-day-current-color;
                                    }

                                    &.calendar-active:hover {
                                        background: lighten($calendar-day-current-bg, 5);
                                    }
                                }

                                a, span {
                                    font-size: 0.75rem;
                                    line-height: 2.5rem;
                                    text-align: center;
                                    width: 2.5rem;
                                }
                            }

                            .calendar-day-details {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }

    .calendar-details {
        @media screen and (min-width: $tablet-size) {
            float: left;
            display: block;
/*           margin-right: $common-margin-right;*/
            width: $calendar-details-width;
        }

        .calendar-day-details {
            .calendar-day {
                margin: 0;
            }

            ul.calendar-day-events {
                list-style: none;
                padding: 0;

                li.calendar-event {
                    padding-top: 0.5em;
                    clear: both;

                    .event-item-left-column {
                        float: left;
                        display: block;
                        margin-right: $common-margin-right;
                        width: $calendar-event-item-left-column-width;
                        position: relative;

                        a {
                            background: $calendar-day-block-bg;
                            background-size: cover;
                            background-position: center center;
                            display: block;
                            min-height: 4rem;
                            width: 100%;

                            time {
                                bottom: 0;
                                background: rgba(255,255,255,0.75);
                                color: #222;
                                position: absolute;
                                padding: 0.25rem 0.5rem;
                                right: 0;
                                z-index: 99;
                            }
                        }
                    }

                    .event-item-right-column {
                        float: left;
                        display: block;
/*                        margin-right: $common-margin-right;*/
                        width: $calendar-event-item-right-column-width;

                        .event-item-title {
                            font-weight: bold;
                            margin: 0;
                            @include location-pin(currentColor)
                        }

                        .event-item-summary {
                            margin: 0.25rem 0;
                        }
                    }
                }
            }
        }

        /*    .view-all {
         *        border: 0;
         *        margin: 0;
         *        padding: 0 0.75rem;
         *        background: #d5d5d5;
         *        position: absolute;
         *        bottom: 0;
         *        color: #000;
         *        line-height: 2;
         *        outline: none;
    }*/

        p.events-view-all {
            font-style: italic;
            clear: both;
        }
    }
}


/* html5 .events-container element for events.html.twig */
.events-container {
    display: inline-block;
    width: 100%;

    .events-listing {
        padding-bottom: 2rem;

        .event-separator {
            border-bottom: $event-separator-border-bottom;
            padding-top: 1.5rem;
            clear: both;

            &:last-child {
                border: 0;
                padding: 0;
            }
        }

        .event-article {
            margin-bottom: 0;
            padding: 1rem 0;

            &:first-child {
                padding: 0;
            }

            .event-header {
                display: block;
                position: relative;
            }

            .event {
                display: block;

                .event-left-column {
                    float: left;
                    display: block;
                    margin-right: $common-margin-right;
                    width: $events-event-left-column-width;

                    .event-datetime {
                        color: #555;
                        display: block;
                        margin: 0.5rem 1rem 0 0;
                        text-align: right;

                        .event-day {
                            display: block;
                            font-size: 1.75rem;
                            font-weight: bold;
                            line-height: 1;
                            margin: 0;
                        }

                        .event-month {
                            display: block;
                            font-size: 1rem;
                            font-weight: bold;
                            line-height: 1;
                            margin: 0.5rem 0;
                            text-transform: uppercase;
                        }

                        .event-time {
                            display: block;
                            font-size: 0.95rem;
                            line-height: 1;
                            margin-top: 0.75rem;
                        }

                        .event-year {
                            display: none;
                        }
                    }
                }

                .event-right-column {
                    float: left;
                    display: block;
/*                    margin-right: $common-margin-right;*/
                    width: $events-event-right-column-width;

                    .event-title {
                        margin: 0.3rem 0rem;
                    }

                    .event-location {
                        margin: -.5rem 0 0.3rem ;
                        @include location-pin
                    }

                    .event-summary {
                        * {
                            display: inline;
                        }
                    }

                    .event-read-more {
/*                        margin-left: $common-margin-right * 2;*/
                    }

                    .event-categories {
                        margin-top: 0.4rem;
                    }
                }
            }

            .event-meta {
                font-style: italic;
            }
        }
    }
}


/* html5 .event-container element for event.html.twig */
.event-container {
    display: inline-block;
    width: 100%;

    .event-listing {
        float: left;
        display: block;
        margin-right: $common-margin-right;
        width: $event-listing-width;

        .event-separator {
            border-bottom: $event-separator-border-bottom;

            &:last-child {
                border: 0;
            }
        }

        .event-article {
            margin-bottom: 0;
            padding: 0;
            padding-bottom: 1rem;

            .event-header {
                img {
                    width: 100%;
                }
            }

            .event {
                .event-right-column {
                    display: flex;
                    flex-direction: column;

                    .event-title {
                        margin-top: 1rem;
                    }

                    .event-location {
                        margin-top: -.5rem;
                        @include location-pin
                    }

                    .event-categories {
                        margin-top: 0.5rem;
                        order: -1; /* show categories at top */
                    }
                }
            }
        }
    }

    .events-sidebar {
        float: left;
        display: block;
/*        margin-right: $common-margin-right;*/
        width: $event-sidebar-width;

        .event-tags {
            list-style: none;
            margin: 0;
            margin-bottom: 2rem;
            padding: 0;

            li {
                display: inline;
            }
        }
    }
}


/* html5 .events-sidebar element for events_sidebar.html.twig */
.events-sidebar {
    h3 {
        margin: 0;
    }

    .events-list {
        list-style: none;
        padding-left: 0;
        margin-top: 0;

        .event-day {
            font-size: 1.2rem;
            font-weight: bold;
            display: block;
            clear: both;

            &:first-child {
                padding-top: 0;
            }
        }

        .event-item-separator {
            border-bottom: $event-separator-border-bottom;
            margin-bottom: 1rem;
            padding-top: 1rem;
            clear: both;

            &:first-child {
                border: 0;
                padding: 0;
            }
        }

        .event-item {
            display: block;
            margin-top: 0.1rem;
            clear: both;

            time {
                float: left;
                display: block;
                margin-right: $common-margin-right;
                width: $events-sidebar-list-item-time-width;
            }

            a {
                float: left;
                display: block;
/*                margin-right: $common-margin-right;*/
/*                width: $events-sidebar-list-item-a-width;*/
            }

            @include location-pin(currentColor)
        }
    }
}


/* html5 .event-tags element */
.event-tags {
    display: inline-block;

    a {
        border-radius: $event-border-radius;
        background: $event-button-bg;
        color: $event-button-color;
        display: inline-block;
        padding: 0 0.5rem;
        font-size: .75rem;
        font-weight: normal;
        text-transform: uppercase;

        &:visited {
            color: $event-button-color;
        }
    }
}


/* clear user agent styles */
.clear-user-agent-styles table,
.clear-user-agent-styles thead,
.clear-user-agent-styles tbody,
.clear-user-agent-styles tfoot,
.clear-user-agent-styles tr,
.clear-user-agent-styles th,
.clear-user-agent-styles td {
    border: none;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
}