/*
    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;
}

/*
    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-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-family: 'FontAwesome';
        font-size: 1.5rem;
        line-height: .8;
        margin-left: -3.1rem;
        margin-top: 1rem;
        padding-right: 1.5rem;
        position: relative;
        top: .25rem;
    }

    &.success::before {
        content: '\f058';
    }

    &.alert::before {
        content: '\f06a';
    }

    &.info::before {
        content: '\f05a';
    }

    &.warning::before {
        content: '\f071';
    }
}

/*
    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;
    }

    /*
        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;
    }

    .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;
    }
    /*
    <--
    */
}

/*
    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: 500px;
}

/*
    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
*/

.homepage-links-panel,
.page-content-panel {
    background-color: $topbar-bg-color;
    margin-bottom: 1.5em;
    padding: 1em;

    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;
        }

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

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

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

/*
    edit bar
*/
.edit-bar {
    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 {
        font-family: 'FontAwesome';
        margin-right: .6em;
    }

    .new-page:before {
        content: '\f0f6';
    }

    .new-link:before {
        content: '\f0c1';
    }

    .new-news:before {
        content: '\f1ea';
    }

    .new-form:before {
        content: '\f044';
    }

    .new-person:before {
        content: '\f007';
    }

    .new-room:before {
        content: '\f015';
    }

    .new-daypass:before {
        content: '\f145';
    }

    .copy-link:before {
        content: '\f0c5';
    }

    .paste-link:before {
        content: '\f0ea';
    }

    .edit-link:before {
        content: '\f040';
    }

    .delete-link:before {
        content: '\f014';
    }
}

/*
    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;
    }
}

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

/*
    main title
*/

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

/*
    page lead
*/
$max-page-width: 600px;

.page-lead {
    display: block;
    font-size: $h5-font-size;
    font-weight: 300;
    margin-bottom: 1.25rem;
    max-width: $max-page-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-page-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-from-public-hint:before {
    color: $alert-color;
    content: '\f070';
    font-family: 'FontAwesome';
    font-style: normal;
}


/*
    Person card
*/
.person-card {
    margin: 0 1em 1em 0;

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

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

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

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

        li:before {
            font-family: 'FontAwesome';
            margin-right: .5ex;
        }
    }

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

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

    .person-card-website:before {
        content: '\f0c1';
    }

    .person-card-phone:before {
        content: '\f095';
    }

    .person-card-email:before {
        content: '\f003';
    }
}

/*
    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';
$frm-handler-icon: '\f044';

.tickets-table {
    width: 100%;

    td {
        vertical-align: top;
    }

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

.ticket-handler-FRM td:first-child::before {
    content: $frm-handler-icon;
    font-family: 'FontAwesome';
    font-weight: normal;
}

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 {
        content: $accept-ticket-icon;
        font-family: 'FontAwesome';
        margin-right: 1ex;
    }

    &:hover::before {
        content: $accept-ticket-icon-hover;
        font-family: 'FontAwesome';
        margin-right: 1ex;
    }
}

.ticket-close {
    float: right;

    &::before {
        content: $close-ticket-icon;
        font-family: 'FontAwesome';
        margin-right: 1ex;
    }

    &:hover::before {
        content: $close-ticket-icon-hover;
        font-family: 'FontAwesome';
        margin-right: 1ex;
    }
}

.ticket-reopen {
    float: right;

    &::before {
        content: $reopen-ticket-icon;
        font-family: 'FontAwesome';
        margin-right: 1ex;
    }

    &:hover::before {
        content: $reopen-ticket-icon-hover;
        font-family: 'FontAwesome';
        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
*/

.calendar {

    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 shoult 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;
    }

    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-radius: 0;
            margin: 0;
        }

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

    .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;
        }
    }
}
