/*
    useful mixins
*/

// scss-lint:disable all
// the scss linter completely looses it with this one
@mixin grayscale() {
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
            filter: gray;
            filter: grayscale(100%);
}
// scss-lint:enable all

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

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


/*
    top navigation
*/

.top-bar {
  margin-bottom: 1rem;

    ul {
        margin-bottom: $top-bar-border-size;
    }
}

.top-bar,
.top-bar-section ul li {
    box-shadow: 0 $top-bar-border-size 0 $primary-color;
}

/*
    alert boxes
*/
.alert-box {
    margin-bottom: 1rem;
}

/*
    form style customizations
*/
form {
    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;
        margin-bottom: 1rem;
        padding: 0;

        legend {
            border-bottom: 1px solid $input-font-color;
            color: $input-font-color;
            font-size: $input-font-size;
            font-weight: normal;
            margin-bottom: 1rem;
        }
    }

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

    /*
        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-label {
        font-weight: bold;
    }
}

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

/*
    form collection rendering
*/
.form-definitions {
    li + li {
        margin-top: 1em;
    }

    .form-definition-title {
        font-weight: bold;
    }

    .form-definition-lead {
        margin-bottom: .2em;
        max-width: 500px;
    }
}

.form-definition-info {
    @include label(
        $bg: $secondary-color,
        $padding: 2px 4px,
        $radius: 2px,
        $text-size: rem-calc(12)
    );

    &.has-submissions {
        background-color: $success-color;

        * {
            color: #fff;
        }
    }

    &.builtin-form {
        background-color: $info-color;
    }
}

/*
    form submissions rendering
*/

.submissions {
    list-style: none;
    margin-left: 0;

    li + li {
        margin-top: 1em;
    }

    .submission-date:before {
        content: '\f133';
        font-family: 'FontAwesome';
    }

    .submission-title:before {
        content: '\f093';
        font-family: 'FontAwesome';
    }

    .submission-email:before {
        content: '\f003\00a0';
        font-family: 'FontAwesome';
    }

    .submission-action-show {
        color: $success-color;
    }

    .submission-action-edit {
        color: $warning-color;
    }

    .submission-action-delete {
        color: $alert-color;
    }

    .submission-action-show:before {
        content: '\f06e\00a0';
        font-family: 'FontAwesome';
    }

    .submission-action-edit:before {
        content: '\f040\00a0';
        font-family: 'FontAwesome';
    }

    .submission-action-delete:before {
        content: '\f014 \00a0';
        font-family: 'FontAwesome';
    }
}

/*
    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-tiles > .row {
  margin-bottom: 1em;
}

.homepage-tile {
    line-height: 1rem;

    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 {
        content: ' | ';
        display: inline-block;
        margin-left: .5ex;
        margin-right: .5ex;
    }

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

    .tile-image {
        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});}

/*
    homepage panels
*/

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

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

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

        a {
            display: block;
            font-weight: bold;
            margin-bottom: -.25rem;
            margin-left: 1rem;
        }

        small {
            font-size: .8em;
            margin-left: 1rem;
        }
    }
}

/*
    edit bar
*/
.edit-bar {
    background-color: $primary-color;
    margin-bottom: .9rem;
    margin-top: -1rem;

    button.tiny {
        margin-bottom: 0;
        padding-left: 1rem;
    }

    a:before {
        font-family: 'FontAwesome';
        margin-right: .4em;
    }

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

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

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

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

    .edit-town-root:before,
    .edit-page:before,
    .edit-news:before,
    .edit-link:before,
    .edit-form:before {
        content: '\f040';
    }

    .delete-link:before,
    .delete-news:before,
    .delete-page:before,
    .delete-form: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:first-child {
        margin-left: 0;
    }
}

/*
    breadcrumbs
*/

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

/*
    sidebar navigation
*/

.sidebar {
    ul {
        padding-left: 1rem;

        // the left side of the sidebar has to align to the text of the
        // top navigation and the edit bar *exactly* - for some reason it
        // doesn't here without removing 1px.. this means I'm doing something
        // wrong, but I haven't yet found out what
        li {
            margin-left: -1px;
        }
    }

    li {
        a.childpage,
        a.new-content-placeholder {
            color: #000;
            padding-left: 1rem;
        }

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

/*
    sticky footer
*/

.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;
        text-align: right;
    }

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

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

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