///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.spectacle-list-container {
    margin: 80px auto;
    padding: 0 10px;
}

/* Header List */

.spectacle-list-header {
    @include outer-container;
    border-bottom: 1px solid $color-grey-border-lighter;
    padding: 10px 0;
}

.spectacle-list-header-display {
    @include span-columns(5);
}

.spectacle-list-header-display-title {
    font-family: 'Lucien-bold';
    font-size: 0.85em;
}

.spectacle-list-header-toolbar {
    @include omega();
    text-align: right;
    .form-nb-item {
        display: inline-block;
        margin-right: 40px;

        .form-select {
            border-radius: 20px;
            padding: 3px 15px;
        }
    }
}

.spectacle-list-header-display-list {
    @include transition (all 0.3s);
    border: 1px solid $color-golden;
    background-color: $color-transparent;
    display: inline-block;
    padding: 4px 20px 0 20px;
    margin-left: 40px;

    .icon-svg {
        display: inline-block;
        fill: $color-golden;
        vertical-align: middle;
        width: 15px;
        height: 17px;
        svg {
            width: 100%;
            height: 100%;
        }
    }

    .label {
        display: inline-block;
        margin-left: 15px;
        font-family: 'Lucien-bold';
        font-size: 0.65em;
        line-height: 1.3em;
        vertical-align: middle;
    }

    &:hover, &.active {

        background-color: $color-golden;
        color: $color-white;

        .icon-svg svg {
            fill: $color-white;
        }

    }

}

.spectacle-list-header-display-calendar {
    @include transition (all 0.3s);
    border: 1px solid $color-golden;
    display: inline-block;
    padding: 4px 20px 0 20px;
    margin-left: 4px;

    .icon-svg {
        display: inline-block;
        fill: $color-golden;
        vertical-align: middle;
        width: 15px;
        height: 17px;
        svg {
            width: 100%;
            height: 100%;
        }
    }

    .label {
        display: inline-block;
        margin-left: 15px;
        font-family: 'Lucien-bold';
        font-size: 0.65em;
        line-height: 1.3em;
        vertical-align: middle;
    }

    &:hover, &.active {

        background-color: $color-golden;
        color: $color-white;

        .icon-svg svg {
            fill: $color-white;
        }
    }
}

/* List */

.spectacle-list {
    @include outer-container;
    margin-bottom: 80px;
}

.spectacle-list-item {
    position: relative;
    @include span-columns(3);
    @include omega(4n);
    margin-top: 80px;
    border: 1px solid $color-grey-border-lighter;
    text-align: center;
    padding: 10px 0 40px 0;
    min-height: 408px;
    transition: all 125ms ease-out;
    transform: translateY(-5px);
    opacity: 0;
    &.loaded {
        opacity: 1;
        transform: translateY(0);
    }
}

.spectacle-list-item-genre {
    position: relative;
    top: -20px;
    padding: 10px 15px;
    font-family: 'Lucien-book';
    font-size: 0.75em;
    color: $color-grey-semi-light;
    background-color: $color-white;
    border: 1px solid $color-grey-border-lighter;
    text-transform: uppercase;
    margin: 0 auto;
    display: inline;
}

.spectacle-list-item-title {
    margin-top: 5px;
    font-family: 'Lucien-bold';
    font-size: 1.125em;
}

.spectacle-list-item-price {
    color: $color-golden;
    font-family: 'Lucien-book';
    font-size: 1.125em;

    span {
        font-family: 'Lucien-regular';
    }

}

.spectacle-list-item-city {
    font-family: 'Lucien-book';
    font-size: 1em;
    color: $color-grey-semi-light;
    margin-top: 20px;
    text-transform: uppercase;
}

.spectacle-list-item-date {
    width: 50%;
    margin: 0 auto;
    font-family: 'Georgia';
    font-size: 0.75em;
    color: $color-grey-semi-light;
    margin-top: 5px;
}

.date-single:not(.active) {
    display: none;
}

.date-from:not(.active), .date-to:not(.active) {
    display: none;
}

.spectacle-list-item-cta {
    $btnsize: 143px;
    position: absolute;
    bottom: -22px;
    left: 50%;
    width: $btnsize;
    margin-left: - ($btnsize/2);
}

.spectacle-list-item-picture {

    width: 38%;
    height: auto;
    margin: 0 auto;
    margin-top: 22px;

    img {
        width: 100%;
        max-width: 100%;
    }

}

.spectacle-list-item-calendar {
    border: none;
    background: $color-grey-background;
    position: relative;
    overflow: hidden;
    display: table;
    height: 400px;
    padding: 0;
    /*width: 80%;*/

    .spectacle-list-item-calendar-wrapper {
        display: table-cell;
        vertical-align: middle;
        z-index: 1;
    }

    span {
        display: block;
        color: $color-grey;
        text-align: center;
        text-transform: uppercase;
    }

    .calendar-triangle {
        background-color: white;
        position: absolute;
        z-index: 0;

        img {
            width: 100%;
            height: 100%;
            image-rendering: pixelated;
        }

        &.calendar-triangle-desktop {
            top: 0;
            right: 0px;
            height: 100%;
            width: 80px;
        }

        &.calendar-triangle-mobile {
            display: none;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80px;
        }
    }

    .spectacle-list-item-calendar-month, .spectacle-list-item-calendar-label-day {
        font-family: 'Lucien-book';
        font-size: 1.4rem;
        color: $color-grey-light;
        margin-left: -50px;
    }

    .spectacle-list-item-calendar-day {
        font-family: 'Lucien-light';
        font-size: 5rem;
        color: $color-grey-light;
        margin-left: -50px;
    }
}

/* Footer list */

.spectacle-list-footer {
    @include outer-container;
    border-top: 1px solid $color-grey-border-lighter;
    padding: 10px 0;
}

.spectacle-list-footer-toolbar {
    text-align: right;
}

.top-pagination {
    display: inline-block;
}

/* pagination */

.pagination-list {
    list-style-type: none;
    display: inline-block;
}

.pagination-item {
    display: inline-block;

    a {
        font-family: 'Lucien-book';
        display: block;
        padding: 0 5px;
        text-decoration: underline;
        @include transition (all 0.3s);

        &:hover {
            color: $color-golden;
        }

        &.active {
            color: $color-golden;
        }

    }

}

.pagination-prev {

    font-family: 'Georgia';
    font-size: 0.85em;

    @include transition (all 0.3s);

    &:before {
        content: '\25C0';
        font-size: 0.8em;
        color: $color-grey-semi-light;
        margin-right: 5px;
        @include transition (all 0.3s);
    }

    &:hover {
        color: $color-golden;

        &:before {
            color: $color-golden;
        }

    }

}

.pagination-next {

    font-family: 'Georgia';
    font-size: 0.85em;

    @include transition (all 0.3s);

    &:after {
        content: '\25b6';
        font-size: 0.8em;
        color: $color-grey-semi-light;
        margin-left: 5px;
        @include transition (all 0.3s);
    }

    &:hover {
        color: $color-golden;

        &:after {
            color: $color-golden;
        }

    }

}

///////////////////////////////////////////////////////////////
// Device: Desktop XL
///////////////////////////////////////////////////////////////

@include desktop-xl {
    .spectacle-list-container {
        padding: 0;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet landscape
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .spectacle-list-container {
        padding: 0 10px;
    }

    .spectacle-list-item-calendar {
        display: table !important;
    }

    .spectacle-list-calendar {
        .spectacle-list-item {
            @include omega-reset(2n);
            @include span-columns(4);
            @include omega(4n);
        }
    }

    .spectacle-list-header-display {
        @include span-columns(12);
        @include omega();
        text-align: center;
    }

    .spectacle-list-header-toolbar {
        @include span-columns(12);
        @include omega();
        text-align: center;
        margin-top: 20px;
    }

    .spectacle-list-footer-toolbar {
        @include outer-container;
        text-align: center;
    }

    .spectacle-list-item-calendar {
        width: 100% !important;
        height: 260px;
        display: table;
        .calendar-triangle {
            display: none;
        }
        .spectacle-list-item-calendar-wrapper {
            margin: 0 auto;
            position: relative;
            display: table-cell;
            vertical-align: middle;
            width: 100%;
        }
        .calendar-triangle-mobile {
            display: block !important;
        }
        .calendar-triangle-desktop {
            display: none;
        }
        .spectacle-list-item-calendar-label-day,
        .spectacle-list-item-calendar-day,
        .spectacle-list-item-calendar-month {
            margin-left: 0;
        }

        .spectacle-list-item-calendar-label-day {
            margin-top: -10px;
            font-size: 1.2em;
        }
        .spectacle-list-item-calendar-day {
            font-size: 4em;
        }
        .spectacle-list-item-calendar-month {
            font-size: 1.2em;
        }
    }

    .spectacle-list-item-cta {
        .button {
            font-size: 0.65em;
            &:hover {
                font-size: 0.65em;
            }
        }
    }

}

///////////////////////////////////////////////////////////////
// Device: Tablet portrait
///////////////////////////////////////////////////////////////

@include tablet-portrait-and-below {
    .spectacle-list-item {
        @include omega-reset(2n);
        @include span-columns(12);
        @include omega();
    }
    .spectacle-list-item-cta {
        .button {
            font-size: 0.8em;
            &:hover {
                font-size: 0.8em;
            }
        }
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .spectacle-list-item {
        @include omega-reset(2n);
        @include span-columns(12);
        @include omega();
    }

    .spectacle-list-header-display {
        text-align: center;

        .spectacle-list-header-display-title {
            display: none;
        }

    }

    .spectacle-list-header-display-list {
        margin-left: 0;
    }

    .spectacle-list-header-toolbar {

        .form-nb-item {
            display: block;
            width: 80%;
            margin: 0 auto 20px auto;
            .form-select {
                padding: 6px 15px 4px 15px;
            }
        }

    }

    .spectacle-list-calendar {
        .spectacle-list-item {
            width: 100% !important;
        }
    }

}