/*
    useful mixins
*/

// scss-lint:disable all
// the scss linter completely looses it with this one
@mixin grayscale() {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: gray;
    -webkit-filter: grayscale(100%);
}
// scss-lint:enable all

@mixin hairline() {
    border: 0;
    border-bottom: 1px solid transparentize($primary-color, .8);
}

@mixin smooth-edges() {
    border-radius: 2px;
}

@mixin icon($icon) {
    content: $icon;
    font-family: 'FontAwesome';
    font-weight: normal;
}


/*
    The maximum width of a line relative to the font. This limits textblocks
    to a readable length.
*/
$max-line-width: 67ex;

/*
    get rid of the jump that is introduced when switching from a site with
    scrollbar to a site without (or vice versa)

    (100vw includes the scrollbar, 100% does not)
*/
html {
    margin-left: calc(100vw - 100%);
}

/*
    our footer is sticky, which is no easy feat, since variable length
    sticky footers don't work with anything but the latest browsers (flex)

    however, sticky footers work just fine if you know the height of the footer

    since we have semi-variable content in the footer (it can change, but not
    often), we read the height of the footer if the settings page is open
    and write the footer height into the custom theme variables

    see common.js for the oneliner that does that (look for footer_height)
*/

html,
body {
    height: 100%;
}

#inner-body {
    margin: 0 auto -$footer-height;
    min-height: 100%;
}

footer,
.push {
    animation-duration: 3s;
    height: $footer-height; /* .push must be the same height as .footer */
}

/*
    Rounded corners for panels.
*/
.panel {
    @include smooth-edges;

    // Zurb lacks a separate color for callout panels.
    &.callout {
        border-color: $callout-panel-border-color;
    }
}

/*
    top navigation
*/

.main-navigation {
    background-color: $topbar-bg-color;
    border-bottom: $top-bar-border-size solid $primary-color;
    margin-bottom: .1rem;
}

.top-bar {

    &.expanded {
        box-shadow: none;
    }
}

/*
    alert boxes
*/
$alert-icon: '\f06a';
$info-icon: '\f05a';
$success-icon: '\f058';
$warning-icon: '\f071';

.alert-box {
    border-color: scale-color($primary-color, $lightness: $alert-function-factor);
    border-left: 3rem solid;
    padding: .5rem 1.5rem .875rem .875rem;
    vertical-align: middle;

    &::before {
        font-size: 1.5rem;
        line-height: .8;
        margin-left: -3.1rem;
        margin-top: 1rem;
        padding-right: 1.5rem;
        position: relative;
        top: .25rem;
    }

    &.alert::before { @include icon($alert-icon); }
    &.info::before { @include icon($info-icon); }
    &.success::before { @include icon($success-icon); }
    &.warning::before { @include icon($warning-icon); }
}

/*
    tables
*/
table {
    border-collapse: separate;

    td,
    th {
        border-bottom: 1px solid $table-border-color;
    }
}


/*
    form style customizations
*/
form {
    label > ul {
        list-style: none;

        margin: 0;
        margin-bottom: 1rem;

        li input[type="checkbox"],
        li input[type="radio"] {
            margin: 0;
        }
    }

    .redactor-editor {
        @include form-element;
        cursor: text;
        height: 100%;
        min-height: 250px;
    }

    small.error {
        padding: .5rem;
        padding-left: .5rem;
    }

    .label-required {
        color: $primary-color;
        font-weight: bold;
    }

    fieldset {
        border: 0;
        border-top: 1px solid $table-border-color;
        margin-bottom: 1rem;
        padding: 0;

        legend {
            color: $input-font-color;
            font-size: $input-font-size;
            margin-bottom: 1rem;
            padding: 0 .75rem;
            text-align: center;
        }
    }

    .upload-widget p {
        color: $success-color;
        font-size: $form-label-font-size;
        margin-bottom: 0;
    }

    .upload-widget.with-data input[type=file] {
        margin-left: 2em;
    }

    /*
        One line checkboxes
    */

    .oneline-checkboxes {
        li {
            display: inline-block;
        }

        label {
            margin-left: 0;
            margin-right: .8rem;
        }
    }

    /*
        Password quality meter
    */
    meter {
        -webkit-appearance: none;
        background: $input-border-color !important;
        border: 0;
        height: 10px;
        position: relative;
        top: -1.55rem;
        width: 100%;
    }

    meter::-webkit-meter-bar {
        background: $input-border-color !important;
        border: 0;
    }

    meter::-webkit-meter-optimum-value {
        background: $success-color;
    }

    /*
        Ace code editor, which you don't want to touch. Huge pita to get to
        work right with custom styling (it'll look like it's working, but
        all the cursor measurements are off and the editing is werid).
    */
    $code-editor-height: 600px;

    .code-editor-wrapper {
        @include form-element;
        height: $code-editor-height;
        margin-bottom: 1em;
    }

    .error .code-editor-wrapper {
        margin-bottom: 0;
    }

    .read-only {
        background-color: $input-disabled-bg;
        color: $steel;
        cursor: $input-disabled-cursor;
    }

    .code-editor,
    .ace_scroller,
    .ace_content {
        height: $code-editor-height - 15px;
    }

    .ace_content {
        color: inherit;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        font-size: 12px;
        line-height: 12px;
    }

    .ace-syntax-error {
        background: $yellow-light;
        position: absolute;
    }
    /*
    <--
    */
}

/*
    form display rendering
*/
.fieldset-display {
    margin-bottom: 1em;
}

.field-display {
    margin-bottom: .5em;

    .field-display-data {
        margin-bottom: 1rem;
    }
}

.field-display-label {
    font-weight: bold;
}

.row.fieldset-display-submit form {
    display: inline-block;
    margin-right: .5em;
}

/*
    simple listed content
*/
.list-title {
    font-weight: bold;
}

.list-lead {
    margin-bottom: .2em;
    max-width: $max-line-width;
}

/*
    the color picker field does not look right with zurb foundation
*/
input[type=color] {
    background-color: transparent;
    border: 0;
    display: block;
    margin-bottom: 1rem;
    padding: 0;
}

/*
    links at the absoulte bottom
*/
.bottom-links {
    color: $bottom-links-color;
    list-style: none;
    margin-left: 0;

    a {
        color: $bottom-links-color;
        font-size: $bottom-links-size;

        &:hover {
            text-decoration: underline;
        }
    }

    li {
        color: $bottom-links-color;
        display: inline;
        font-size: $bottom-links-size;
    }

    li:after {
        content: '|';
    }

    li:last-child:after {
        content: '';
    }
}

/*
    homepage tiles
*/

.homepage-tile {
    line-height: 1rem;
    margin-bottom: 1.375em;
    overflow: hidden;
    text-overflow: ellipsis;

    h2 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .tile-sub-link {
        font-size: $bottom-links-size;
    }

    .tile-sub-link:hover {
        text-decoration: underline;
    }

    .tile-sub-link:after {
        color: transparentize($primary-color, .8);
        content: ' | ';
        display: inline-block;
        margin-left: .6ex;
        margin-right: .6ex;
    }

    .tile-sub-link:last-child:after {
        content: '';
    }

    .tile-image {
        @include smooth-edges;

        background-position: center center;
        background-size: cover;
        display: block;
        height: 5rem;
        width: 100%;
    }

    .tile-link:hover h2 {
        color: $primary-color;
    }

    .tile-link:hover .tile-image {
        @include grayscale;
    }
}

/*
    homepage tiles images
*/

#homepage-tile-1 .tile-image { background-image: url(#{$tile-image-1});}
#homepage-tile-2 .tile-image { background-image: url(#{$tile-image-2});}
#homepage-tile-3 .tile-image { background-image: url(#{$tile-image-3});}
#homepage-tile-4 .tile-image { background-image: url(#{$tile-image-4});}
#homepage-tile-5 .tile-image { background-image: url(#{$tile-image-5});}
#homepage-tile-6 .tile-image { background-image: url(#{$tile-image-6});}

/*
    panels
*/

$more-link-icon: '\f054';

.homepage-links-panel,
.page-content-panel {
    background-color: $topbar-bg-color;
    margin-bottom: 1.5em;
    padding: 1em;
    
    /* add dots for oveflowing links */
    a {
        display: block; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap;
    }

    h2 {
        font-size: 1em;
        font-weight: normal;
        margin-top: 0;
    }

    ul {
        list-style: none;
        margin: 0;

        a {
            display: block;
            font-weight: bold;
            margin-bottom: -.375rem;
            margin-top: .375rem;
            overflow: hidden;
            text-overflow: ellipsis;

            &.more-link {
                font-size: .8em;
                font-weight: normal;

                &::before {
                    @include icon($more-link-icon);
                    font-size: .8em;
                    margin-right: 1ex;
                }
            }

        }

        small {
            font-size: .8em;
        }
    }

    &.contact-panel {
        p {
            margin-bottom: 0;
        }

        p:first-line {
            font-weight: bold;
        }
    }
}

/*
    edit bar (and popup links)
*/
$accept-link-icon: '\f00c';
$cleanup-link-icon: '\f0d0';
$copy-link-icon: '\f0c5';
$delete-link-icon: '\f014';
$edit-link-icon: '\f040';
$new-daypass-icon: '\f145';
$new-form-icon: '\f044';
$new-link-icon: '\f0c1';
$new-news-icon: '\f1ea';
$new-page-icon: '\f0f6';
$new-person-icon: '\f007';
$new-reservation-icon: '\f271';
$new-room-icon: '\f015';
$paste-link-icon: '\f0ea';

.edit-bar,
.popup {
    background-color: $primary-color;
    margin-bottom: 2px;
    margin-top: -6px;

    button.tiny {
        float: right;
        font-size: .8rem;
        margin-bottom: 0;
    }

    > a {
        margin-bottom: 0;
    }

    a.tiny {
        font-size: .8rem;
    }

    a:before {
        margin-right: .6em;
    }

    .accept-link:before { @include icon($accept-link-icon); }
    .cleanup-link:before { @include icon($cleanup-link-icon); }
    .copy-link:before { @include icon($copy-link-icon); }
    .delete-link:before { @include icon($delete-link-icon); }
    .edit-link:before { @include icon($edit-link-icon); }
    .new-daypass:before { @include icon($new-daypass-icon); }
    .new-form:before { @include icon($new-form-icon); }
    .new-link:before { @include icon($new-link-icon); }
    .new-news:before { @include icon($new-news-icon); }
    .new-page:before { @include icon($new-page-icon); }
    .new-person:before { @include icon($new-person-icon); }
    .new-reservation:before { @include icon($new-reservation-icon); }
    .new-room:before { @include icon($new-room-icon); }
    .paste-link:before { @include icon($paste-link-icon); }
}

/*
    images
*/
.thumbnail {
    padding: .5em;
}

/*
    image control elements
*/
.image-box {
    position: relative;

    .delete {
        background-color: $input-disabled-bg;
        border-radius: 15px;
        color: $button-font-color;
        height: 27px;
        left: -4px;
        position: absolute;
        text-align: center;
        top: -13px;
        width: 27px;
    }

    .delete:hover {
        background-color: $alert-color;
    }
}

/*
    dropzone styling
*/
.dropzone {
    background-color: $topbar-bg-color;
    border: 1px dashed $primary-color;
    margin-bottom: 1rem;
    padding: 1rem;

    .dz-preview {
        float: left;
        margin-right: 1rem;
    }

    .dz-details,
    .dz-error-mark,
    .dz-image,
    .dz-success-mark {
        margin-top: 1rem;
    }

    .dz-filename {
        display: none;
    }

    .dz-success .dz-error-mark {
        display: none;
    }

    .dz-error .dz-success-mark {
        display: none;
    }

    .dz-success-mark * {
        fill: $success-color;
    }

    .dz-error-mark * {
        fill: $alert-color;
    }

    > div:last-child {
        margin-bottom: 0;
    }
}

/*
    richtext editor dropzone
*/
div#redactor-droparea {
    background-color: $topbar-bg-color;
    border: 1px dashed $primary-color;
    font-size: 1rem;

    input {
        display: inline;
        text-align: center;
    }
}

/*
    hide the "open in new tab" element in the redactor
*/

#redactor-modal-link-insert label:last-child {
    display: none;
}

/*
    the file manager redactor list doesn't need a max height, it has a limited
    container already, but since we can't switch back to 'auto', we use a
    really large value
*/
#redactor-file-manager-box > ul {
    max-height: 10000px !important;
}

#redactor-modal-file-insert {
    padding-bottom: 0 !important;  // ..we also don't need this extra space
}

/*
    confirm dialog styling
*/
.confirm-modal .button {
    margin-right: 1rem;
    margin-top: 1rem;
}

/*
    main title
*/

.main-title {
    margin-top: -.5rem;
}

/*
    page lead
*/
.page-lead {
    display: block;
    font-size: $h5-font-size;
    font-weight: 300;
    margin-bottom: 1rem;
    max-width: $max-line-width;
}

/*
    page text
*/

.page-text {
    margin-bottom: 1rem;

    blockquote {
        background-color: $topbar-bg-color;
        padding: .5rem 1rem;
    }

    hr {
        @include hairline;
    }

    img {
        display: block;
    }

    p {
        max-width: $max-line-width;
    }

    .has-img {
        max-width: none;
    }
}

/*
    page links
*/

.page-links {
    li {
        margin-left: 0;
        margin-right: 1rem;

        a:after {
            color: transparentize($primary-color, .8);
            content: ' | ';
            display: inline-block;
            margin-left: 1rem;
        }

        &:last-child a:after {
            content: '';
        }
    }
}

/*
    breadcrumbs
*/

.breadcrumbs {
    @include hairline;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    padding-left: 1rem;

    li {
        line-height: 1rem;
    }
}

/*
    sidebar navigation
*/

.sidebar {
    li {
        a.childpage,
        a.new-content-placeholder {
            color: $oil;
            overflow: hidden;
            padding-left: 1.5rem;
            text-overflow: ellipsis;
        }

        a.new-content-placeholder {
            display: none;
        }
    }
}

.sidebar-bottom {
    ul {
        padding-left: 0;
    }
}

/*
    content block
*/
.content {
    margin-bottom: 1rem;
}

/*
    sticky footer
*/

.footer {
    // please do not add a margin here, it will mess up the sticky footer!
    // instead add a margin-bottom to whatever is rendered before the footer.

    padding: 0 1rem;

    h2,
    div {
        color: $topbar-link-color;
        font-size: $topbar-link-font-size;
    }

    h2 {
        font-weight: bold;
    }

    .bottom-links {
        margin-bottom: .25rem;
        padding: .25rem 0;
        text-align: right;
    }

    .footer-links > div {
        padding-right: 0;
    }

    .footer-columns {
        background-color: $topbar-bg-color;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
}

/*
    news list
*/

.news-list-item {
    a h2 {
        color: $side-nav-link-color;
        font-size: $h4-font-size;
        margin-bottom: .5rem;
    }

    a:hover h2 {
        color: $side-nav-link-color-hover;
    }

    .news-date {
        color: $monsoon;
        font-size: $bottom-links-size;
        margin-bottom: .5rem;
    }

    .news-lead {
        margin-bottom: .5rem;
    }
}


/*
    hide the news in the topbar
*/

.top-bar-section li:last-child {
    display: none;
}

/*
    the icon hinting at pages being hidden from the public
*/
$hidden-page-icon: '\f070';

.hidden-from-public-hint:before {
    @include icon($hidden-page-icon);
    color: $alert-color;
}

/*
    Person card
*/
$person-website-icon: '\f0c1';
$person-phone-icon: '\f095';
$person-email-icon: '\f003';

.person-card {
    margin: 0 1em 1em 0;

    .person-card-portrait {
        @include smooth-edges;

        background: $topbar-bg-color;
        float: left;
        height: 200px;
        margin-right: 1rem;
        overflow: hidden;
        padding-top: 0;
        text-align: center;
        width: 200px;

        // this would be nicer with object-position and object-fit, but IE
        // doesn't support it at all and Safari only somewhat.
        .cover-image {
            background-position: center top;
            background-size: cover;
            height: 100%;
            width: 100%;
        }

        .fa-user {
            color: $white;
            font-size: 200px;
        }
    }

    ul {
        list-style: none;
        margin-bottom: 0;
        margin-left: 0;

        li:before {
            margin-right: .5ex;
        }
    }

    .person-card-function {
        margin-bottom: 1em;
    }

    .person-card-address {
        margin-bottom: 1em;

        span {
            white-space: pre-line;
        }
    }

    .person-card-website:before { @include icon($person-website-icon); }
    .person-card-phone:before { @include icon($person-phone-icon); }
    .person-card-email:before { @include icon($person-email-icon); }
}

/*
    Person card in lists
*/

.person-list-card {
    .person-card-portrait {
        height: 5rem; // enough to show three lines of text
        width: 5rem;

        .fa-user {
            font-size: 80px;
        }
    }

    .person-card-title {
        font-weight: bold;
    }
}


/*
    Ticket
*/
$open-ticket-bg: $primary-color;
$pending-ticket-bg: $blue-light;
$closed-ticket-bg: $green-light;
$ticket-number-bg: $yellow-light;

.ticket-number-plain {
    color: $monsoon;
    font-family: $font-family-monospace;
    font-weight: bold;
}

.ticket-number {
    @include label(
        $padding: .25rem .5rem .1rem,
        $text-size: 1rem,
        $bg: $ticket-number-bg,
        $radius:4px
    );
    font-family: $font-family-monospace;
}

.ticket-date {
    color: $monsoon;
}

.ticket-state-open {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $open-ticket-bg,
        $radius:4px
    );
}

.ticket-state-pending {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $pending-ticket-bg,
        $radius:4px
    );
}

.ticket-state-closed {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $closed-ticket-bg,
        $radius:4px
    );
}

/*
    Tickets list
*/
$accept-ticket-icon: '\f1db';
$accept-ticket-icon-hover: '\f192';
$close-ticket-icon: '\f1db';
$close-ticket-icon-hover: '\f05d';
$reopen-ticket-icon: '\f1db';
$reopen-ticket-icon-hover: '\f192';
$all-handler-icon: '\f069';
$frm-handler-icon: '\f044';
$rsv-handler-icon: '\f073';
$evn-handler-icon: '\f133';
$open-ticket-icon: '\f10c';
$pending-ticket-icon: '\f192';
$closed-ticket-icon: '\f05d';
$all-ticket-icon: '\f055';

.ticket-filter-open::before {
    @include icon($open-ticket-icon);
    padding-right: .8ex;
}

.ticket-filter-pending::before {
    @include icon($pending-ticket-icon);
    padding-right: .8ex;
}

.ticket-filter-closed::before {
    @include icon($closed-ticket-icon);
    padding-right: .8ex;
}

.ticket-filter-all::before {
    @include icon($all-ticket-icon);
    padding-right: .8ex;
}

.tickets-table {
    width: 100%;

    td {
        vertical-align: top;

        &.ticket-user {
            text-align: right;
        }

        // forces the ticket-title and group to break on newlines
        &.ticket-number-plain,
        &.ticket-date,
        &.ticket-action {
            white-space: nowrap;
        }
    }

    th {
        button,
        dl {
            margin: 0;
        }

        dl dd {
            margin-left: 0;
        }

        dd + dd {
            margin-left: .75em;
        }

        button {
            float: right;
        }

        ul li {
            font-size: .8rem;
            font-weight: normal;
        }
    }
}

.ALL-link::before { @include icon($all-handler-icon); }
.FRM-link::before { @include icon($frm-handler-icon); }
.RSV-link::before { @include icon($rsv-handler-icon); }
.EVN-link::before { @include icon($evn-handler-icon); }

.ALL-link::before,
.FRM-link::before,
.RSV-link::before,
.EVN-link::before {
    display: inline-block;
    margin-right: 1ex;
}

.ticket-handler-FRM td:first-child::before {
    @include icon($frm-handler-icon);
}

.ticket-handler-RSV td:first-child::before {
    @include icon($rsv-handler-icon);
}

.ticket-handler-EVN td:first-child::before {
    @include icon($evn-handler-icon);
    color: $monsoon;
}

.ticket-row-state-pending td:last-child::after {
    @include icon($pending-ticket-icon);
    color: $monsoon;
    padding-left: .5ex;
}

.ticket-row-state-closed td:last-child::after {
    @include icon($closed-ticket-icon);
    color: $monsoon;
    padding-left: .5ex;
}

tr.ticket:hover {
    background-color: $yellow-pastel;
}

.ticket-action {
    @include button(
        $padding: $button-tny,
        $bg: $success-color
    );
    font-size: 1em;
    margin: 0;
}

.ticket-accept {
    float: right;

    &::before {
        @include icon($accept-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        @include icon($accept-ticket-icon-hover);
        margin-right: 1ex;
    }
}

.ticket-close {
    float: right;

    &::before {
        @include icon($close-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        @incude icon($close-ticket-icon-hover);
        margin-right: 1ex;
    }
}

.ticket-reopen {
    float: right;

    &::before {
        @include icon($reopen-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        @include icon($reopen-ticket-icon-hover);
        margin-right: 1ex;
    }
}

/*
    Sub navigation
*/
.sub-nav {
    // we slightly increase the padding in the town theme, if the line height
    // is not slightly increased at the same time, we see some weird overlap
    line-height: 1.7rem;
}


/*
    Ticket counter in header
*/

.ticket-count {
    background-color: $primary-color;
    border-radius: 0 0 3px 3px;
    color: $white;
    float: right;
    font-size: .8rem;
    padding: .25rem .5em;

    > div {
        display: inline-block;

        + div::before {
            content: '|';
        }
    }

    .number {
        font-weight: bold;
    }

    a {
        color: $white;
    }
}


/*
    Fullcalendar Integration
*/

@keyframes fadeout-box-shadow {
    to {box-shadow: none;}
}

.calendar {

    margin-bottom: 1.5rem;

    button:focus {
        // XXX fullcalendar focuses the buttons when they are clicked,
        // resulting in the chrome accessibility outline.. now this is
        // helpful in allmost all the cases (and should not be disabled)
        // however, the calendar is not accessible as it is, so we might
        // as well remove this otherwise very jaring looking outline
        // -> the fullcalendar needs an accessible alternative, it can't
        // really be made accessible because it's a huge blob of html
        // tables designed to show a calendar...
        outline: none;
    }

    .fc-toolbar {
        margin-bottom: 0;
    }

    table {
        background-color: transparent;
        margin-bottom: 0;

        tr {
            background-color: transparent;
        }

        .fc-today {
            background: $yellow-pastel;
        }

        .fc-day-header,
        .fc-day-number {
            font-size: .9em;
        }

        .fc-event {
            border: 0;
            border-radius: 2px;
            margin: 0 0 2px;
            padding: 2px 4px;
        }

        .fc-bg {
            background: none;
        }

        .event-unavailable {
            background-color: $red;
        }

        .event-partly-available {
            background-color: $orange;
        }

        .event-available {
            background-color: $green;
        }

        // fix borders missing with zurb foundation
        tbody div.fc-content-skeleton td {
            border-color: #ddd;
        }
    }

    .fc-event {
        .fc-time {
            display: none;
        }

        &.highlight {
            animation-delay: 3s;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
            animation-name: fadeout-box-shadow;
            box-shadow: 0 5px 0 $yellow;
        }

        &.event-unavailable.has-popup {
            border-right: 5px solid $red-dark;
        }

        &.event-partly-available.has-popup {
            border-right: 5px solid $orange-dark;
        }

        &.event-available.has-popup {
            border-right: 5px solid $green-dark;
        }
    }

    .fc button,
    .fc-button {
        @include button(
            $padding: $button-tny,
            $bg: $primary-color
        );
        background-image: none;
        box-shadow: none;
        font-size: .9rem;
        height: 2.25rem;
        text-shadow: none;

        &.fc-state-active,
        &.fc-state-disabled {
            background: $secondary-color;
            color: $jet;
            opacity: 1;
        }
    }
}

/*
    Events
*/

.occurrence {
    margin-bottom: 2rem;

    h2 {
        font-size: $h3-font-size - $h3-font-reduction;
    }
}

.occurrence-tag {
    @include label(
        $bg: $secondary-color,
        $radius: 4px
    );

    &.active {
        @include label(
            $radius: 4px
        );
    }

    a {
        color: inherit;
    }
}

.occurrences-day-date {
    padding: .5em 0;
    width: 100%;

    &.active {
        background-color: $white-smoke;
    }

    div {
        text-align: center;

        &.day {
            font-size: 3em;
            font-weight: bold;

        }
    }
}

.occurrences-filter-result {
    margin-bottom: 1em;

    span:first-child {
        font-size: 1.6em;
        font-weight: bold;
    }
}

.occurrences-filter-tags,
.occurrences-filter-date {
    margin-bottom: 1em;
}

.occurrences-add-box {
    @include panel;
    @include smooth-edges;

    margin-top: 2em;

    h2 {
        color: $primary-color;
        display: inline;
        font-size: 1rem;
        font-weight: bold;
    }
}

.occurrence-tags,
.occurrence-description {
    margin-bottom: 1.25em;
}

.occurrence-description {
    max-width: $max-line-width;
}

.occurrence-date {
    font-size: .8em;
}

.occurrence-exports {
    @include panel;
    @include smooth-edges;

    margin-bottom: 1.5em;

    h2 {
        font-size: 1rem;
    }
}

.occurrence-occurrences {
    h2 {
        font-size: 1rem;
    }
}


/*
    Fullcalendar Screen Flicker Prevention
*/

@media #{$small-only} {
    .calendar {
        min-height: $small-breakpoint * .5;
    }
}

@media #{$medium-only} {
    .calendar {
        min-height: $medium-breakpoint * .5;
    }
}

@media #{$large-up} {
    .calendar {
        min-height: $large-breakpoint * .5;
    }
}

/*
    Popup Menu
*/
.popup {
    background-color: #fff;
    border: 1px solid $gainsboro;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
    padding: 2px 6px;
    position: relative;

    a {
        display: block;
        font-size: .8rem;

        &:hover {
            text-decoration: underline;
        }

        &:hover::before {
            display: inline-block;
            text-decoration: none;
        }
    }

    // the arrow of the popup (which is currently shown right of the element)
    // if other arrows are needed add classes for each direction
    &:after,
    &:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        pointer-events: none;
        position: absolute;
        right: 100%;
        top: 50%;
        width: 0;
    }

    &:after {
        border-color: rgba(213, 213, 213, 0);
        border-right-color: #fff;
        border-width: 7px;
        margin-top: -7px;
    }

    &:before {
        border-color: rgba(245, 24, 172, 0);
        border-right-color: $gainsboro;
        border-width: 8px;
        margin-top: -8px;
    }
}
