//##############################################################################
// FORMS

form {
    margin-bottom: 20px;
    padding: 25px 25px;
    background-color: $white;
    box-shadow: $base-box-shadow;
    fieldset, .inline-group {
        width: 80%;
    }

    // Newer Django admin styles use flexbox, we do not
    .flex-container {
        display: block;
        margin-right: 20px;
    }
    .flex-container.form-multiline {
        display: flex;
        margin-right: 0;
        div.fieldBox {
            display: block;
            //margin-right: 0;
        }
        & > div:has(> div.hidden) {
            display: none;
        }
    }
    fieldset.module > h2 {
        margin-right: 20px;
    }

    // only uses this styles if form-row is not set on a table row because before and after breaks tables #247
    .form-row:not(tr) {
        // adds clearfix because overflow hidden truncates highlighted focus fields #242
        @include micro-clearfix;
        .vForeignKeyRawIdAdminField,
        .vManyToManyRawIdAdminField {
            // calculates width that search button appears next to search input
            width: calc(100% - 50px) !important;
        }
    }
    .form-row {
        // Improve readability by increasing contrast
        & div > label:not(.vCheckboxLabel) {
            color: $gray-darker !important;
            font-weight: bold !important;
            width: 100% !important;
            text-transform: inherit;
        }
        // make sure that highlighted focus on fields is not truncated #242
        overflow: visible;
        border-bottom: 0;
        .btn-group-sizes .btn-default {
            min-height: inherit !important;
        }
        &.field-get_attachment_address a {
            display: block;
            position: relative;
            font-size: $font-size-large;
            line-height: $font-size-large;
            margin: 10px 0;
            padding-left: 30px;
            &:before {
                position: absolute;
                left: 0;
                color: $gray;
            }
        }
        &.field-sha1 {
            label {
                display: inline-block;
            }
            p {
                display: inline-block;
                color: $gray-darkest !important;
            }
        }
        &.field-image {
            .filerFile img {
                width: 36px;
                height: 36px;
                // fixes clear button size in form fields #262
                &.filerClearer {
                    width: 10px;
                    height: 10px;
                }
            }
        }
        &.field-folder {
            // hides related widget wrapper links because they don't work correctly and are not necessary because
            // of magnifier and delete link #224
            .related-widget-wrapper-link {
                display: none;
            }
        }
        .filer-dropzone ~ .related-widget-wrapper-link {
            // hides related widget wrapper links because they don't work with filer dropzones
            display: none;
        }
        &.field-thumbnail {
            margin: 0;
        }
        .related-lookup {
            display: inline-block;
            float: none;
            text-align: center;
            vertical-align: top;
            margin: 0 0 0 10px;
            padding: 9px !important;
            &:before {
                margin: 0 !important;
            }
            img {
                display: none;
            }
        }
        .vForeignKeyRawIdAdminField,
        .vManyToManyRawIdAdminField {
            width: auto !important;
        }

        // only affects field boxes when they are next to each other
        & > .fieldBox, & > div:not([class]) > .fieldBox,
        & > div:not([class]) > .flex-container > div:not(.related-widget-wrapper, .cke, .widget),
        .form-multiline > div:not(.related-widget-wrapper,
        .form-multiline > div:not([class]) > div:not(.related-widget-wrapper),
        .cke, .widget) {
            margin-right: 0px;
            box-sizing: border-box;
            width: 50%;
            max-width: 500px;

            & > label {
                text-transform: inherit;
            }
            & + .fieldBox {
                padding-top: 0;
            }

            &:not(:first-child) {
                border-top: none;
                // padding-right: 2vw;
            }
        }
    }
    input[type="color"] {
        width: revert;
    }
    button,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    select,
    textarea {
        font-size: $font-size-small;
        width: 100% !important;
        max-width: none !important;
        border-radius: 3px !important;
        // resets background color for input fields for dark system #271
        background-color: $white;
        appearance: none;

        // resets default firefox error style
        &:-moz-ui-invalid {
            box-shadow: none;
        }
    }
    &,
    .datetime,
    .form-row .datetime {
        input.vDateField,
        input.vTimeField {
            margin-left: 0; // django 1.9
            margin-bottom: 0; // django 1.9
        }

        // add a little bit of space on top
        br + label {
            margin-top: 10px;
        }
    }
    select::-ms-expand {
        display: none;
    }
    button {
        width: auto !important;
    }
    .cke {
        box-sizing: border-box;
    }
    & {
        .field-number_of_visits p {
            margin-left: 0;
            padding-left: 0;
        }
        div.help,
        p.help {
            clear: both;
            color: $gray;
            font-size: $font-size-small !important;
            margin-top: 7px !important;
            margin-left: 2px !important;
            margin-bottom: 0;
            padding: 0 !important;
        }

        input + p.help,
        textarea + p.help,
        select + p.help,
        input + div.help,
        textarea + div.help,
        select + div.help {
            padding-left: 0;
            margin-left: 0;
        }
        div + div.help {
            margin-left: 0px;
            padding-left: 0px;
        }
        label {
            padding: 0 !important;
            line-height: 20px;
            &:not(.vCheckboxLabel):after {
                content: none;
            }
            & + div.readonly {
                margin-top: -5px;
            }
        }
        label + label {
            margin-left: 10px;
        }
    }
    .vCheckboxLabel,
    .field-type label,
    .sortedm2m label {
        color: $gray-darker !important;
        font-size: $font-size-large !important;
        vertical-align: bottom;
        text-transform: none;
        margin-bottom: 0;
        + a {
            font-size: $font-size-large;
            font-weight: normal;
        }
    }
    .field-type label {
        margin-top: 10px !important;
        margin-left: 2px !important;
    }
    .sortedm2m a {
        vertical-align: middle;
        // removed padding top makes sure that label is correct aligned with link #280
    }
    small {
        color: $gray;
    }
    hr {
        margin: 5px 0;
    }
    fieldset {
        line-height: 2em;
        vertical-align: middle;
        box-sizing: border-box;
        &.collapse h2 {
            color: $gray-darkest;
            font-size: $font-size-large;
            background: none;
        }
        &.collapsed {
            margin-bottom: 30px !important;
            border: 0;
            .collapse-toggle {
                color: $color-primary;
            }
        }
    }
    label select {
        display: block;
        margin-top: 5px;
        margin-left: 0 !important;
    }
    label,
    label.aligned {
        display: block;
        float: none !important;
        // FABR: !important not necessary
        color: $gray;  // !important;
        font-size: $font-size-normal;
        font-weight: normal !important;
        line-height: $line-height-normal;
        text-transform: uppercase;
        word-wrap: break-word;
        width: auto !important;
        margin-bottom: 5px;
        // make sure we can differentiate required from normal side #249
        &.required {
            color: $black !important;
            font-weight: bold !important;
        }
        &.btn {
            float: left !important;
            // FABR: ! Important conflicts with unfilled buttons
            color: $white; // !important;
            padding: 6px 12px !important;
        }
        &.btn-default,
        &.btn-link {
            color: $gray-darker; // !important;  // dito
        }
        &:after {
            height: 20px !important;
        }
    }
    label.aligned + div.readonly {
        width: 160px;
        margin-left: 170px;
    }
    // input
    input,
    textarea {
        color: $gray-darkest;
        font-size: $font-size-small;
        line-height: 24px;
        box-sizing: border-box;
        height: 36px;
        min-height: 24px;
        padding: 6px !important;
        border: 1px solid $gray-lighter !important;
        border-radius: $border-radius-base;
        outline: none;
    }
    textarea {
        height: auto;
    }
    input[type="checkbox"],
    input[type="radio"] {
        position: relative;
        top: -1px;
        overflow: hidden;
        line-height: $base-line-height;
        vertical-align: bottom;
        width: auto !important;
        height: auto;
        min-height: unset;
        margin-right: 10px;
        padding: 0 !important;
        border: 0 !important;
    }
    input[type="file"] {
        color: $gray;
        padding: 6px 5px;
        height: auto;
        border: 1px solid $gray-lighter;
        border-radius: $border-radius-base;
        outline: none;
    }
    select {
        font-size: $font-size-small;
        font-weight: normal;
        line-height: 20px;
        box-sizing: border-box;
        min-width: 160px;
        height: 36px !important;
        padding: 6px;
        border: 1px solid $gray-lighter;
        border-radius: $border-radius-base;
        background: $white url("../img/icon_arrow_down.png") no-repeat right center !important;
        background-size: 25px !important;

        appearance: none;
    }
    select[multiple] {
        height: auto !important;
    }
    select + select {
        margin-top: 10px !important;
    }
    small {
        margin-left: 15px;
    }
    .form-controls {
        text-align: right;
        margin: 15px 0 0 0;
        p {
            margin-top: 6px;
        }
    }
    .input-list {
        display: inline-block;
        line-height: 20px;
        vertical-align: top;
    }
    .extra {
        .right {
            float: right;
            margin-right: 10px;
        }
    }
    .errors {
        margin-bottom: 20px;
        padding: 10px;
        border: 0;
        border-radius: $border-radius-base;
        background-color: $color-danger-ultralight;
        input,
        select,
        textarea {
            border-color: $gray-lighter;
        }
    }
    .form-row:not(tr) {
        padding: 0 2px 25px;
        border-bottom-color: $gray-lighter;
        &.errors {
            margin-bottom: 20px;
            padding: 10px;
            border: 0;
            border-radius: $border-radius-base;
            background-color: $color-danger-ultralight;
        }
    }
    .form-row:last-child {
        border-bottom-color: transparent;
    }
    h2 + .form-row > .checkbox-row {
        // make sure that there is not a double line after h2 #195
        padding-top: 0;
        border-top: 0;
    }
    .checkbox-row {
        line-height: 20px;
        margin-bottom: -5px;
        // wraps checkbox rows with border #188
        padding-top: 15px;
        border-top: solid 1px $gray-lighter;
        // remove border top and padding on first child #291
        &:first-child {
            padding-top: 0;
            border-top: 0;
        }
        input[type="checkbox"],
        input[type="radio"] {
            top: auto;
            vertical-align: middle;
            width: auto !important;
            height: auto !important;
        }
        label {
            color: $gray-darkest !important;
            font-size: $font-size-large;
            vertical-align: middle;
            text-transform: none;
            &.vCheckboxLabel {
                display: inline;
                vertical-align: middle;
            }
        }
    }

    // backport from django 1.9
    .aligned label.vCheckboxLabel {
        display: inline;
        + p {
            padding: 6px 0;
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}

.form-row .select2-container {
    min-width: 250px + 12px;
    &.select2-container--admin-autocomplete .select2-selection {
        min-height: 36px;
        .select2-selection__arrow {
            height: 32px;
        }
        .select2-selection__clear {
            margin-top: 5px;
        }
    }
} // standard input width + default input padding

.inline-group .module:not(.aligned) .form-row input,
.inline-group .module:not(.aligned) .form-row textarea:not(.cke_source) {
    width: auto !important;
}

// select2
form {
    .select2-container {
        width: 100%;
        &.select2-container-active {
            .select2-choice,
            .select2-choices {
                box-shadow: none;
            }
        }
        &.select2-container--default .select2-selection--single {
            border: 1px solid $gray-lighter;
            border-radius: $border-radius-base;
            height: 36px;
            line-height: 36px;

            .select2-selection__arrow {
                height: 36px;
            }

            .select2-selection__rendered {
                font-size: $font-size-small;
                line-height: 34px;

                .select2-selection__clear {
                    line-height: 36px;
                }
            }
        }
        .select2-choice {
            line-height: 22px;
            height: 22px;
            padding: 6px 40px 6px 20px;
            border: 1px solid $gray-lighter;
            border-radius: $border-radius-base;
            background: none;
            & > .select2-chosen {
                font-size: $font-size-small;
                line-height: 22px;
            }
            .select2-arrow {
                right: 9px;
                width: 17px;
                border: none;
                border-radius: 0;
                background: none;
                b {
                    background: url("../img/select2.png") no-repeat 0 6px;
                    background-size: 50px;
                }
            }
            .select2-search-choice-close {
                top: 10px;
                right: 35px;
            }
        }
    }
    .select2-dropdown-open {
        &.select2-drop-above {
            .select2-choice,
            .select2-choices {
                border-color: $gray-lighter !important;
                background-image: none !important;
            }
        }
        .select2-choice {
            background-color: $white;
            background-image: none;
            .select2-arrow b {
                background-position: -16px 5px;
            }
        }
    }
}
.select2-dropdown {
    border-color: $gray-lighter !important;
}
.select2-drop-active {
    border: 1px solid $gray-lighter !important;
}
.select2-results {
    margin: 0 10px 10px !important;
    padding: 0 !important;
    .select2-no-results,
    .select2-searching,
    .select2-ajax-error,
    .select2-selection-limit {
        color: $gray;
        font-size: $font-size-small;
        padding: 0 !important;
        background-color: transparent !important;
    }
    .select2-highlighted {
        border-radius: $border-radius-base;
        background-color: $color-primary !important;
    }
}
.select2-match {
    font-size: $font-size-normal !important;
}
.select2-search {
    padding: 10px !important;
    input {
        font-size: $font-size-small !important;
        width: 100% !important;
        padding: 10px 40px 10px 20px !important;
        border: 1px solid $gray-lighter !important;
        border-radius: $border-radius-base !important;
        background: url("../img/select2.png") no-repeat right -27px !important;
        background-size: 50px !important;
    }
}

input:invalid,
textarea:invalid {
    border-radius: $border-radius-base;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
    background-color: $color-danger-ultralight;
}

// buttons
button {
    @include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
}
input[type="submit"],
input[type="button"] {
    @include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
    font-weight: normal !important;
    width: auto !important;
    padding: 10px 20px !important;
    &.default {
        @include button-variant($btn-action-color, $btn-action-bgcolor, $btn-action-border, true);
        padding: 10px 20px !important;
    }
}
a.button {
    @include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
    text-decoration: none;
    cursor: pointer;
    &.tab {
        border-radius: 0;
    }
}

// date time
.form-row {
    p.datetime {
        font-size: $font-size-normal !important;
        font-weight: normal;
        line-height: 36px;
        margin-left: 0;
        padding-left: 0;
    }
}

// calendar
div.calendar {
    table {
        max-width: 250px !important;
        caption {
            color: $gray !important;
            margin: 0;
            padding: 10px 30px;
            border-bottom: solid 1px $gray-lighter;
            background-color: $white;
            background-image: none;

            border-top-radius: $border-radius-base;
        }
        th {
            color: $gray-darkest;
            font-family: $base-font-family;
            background: none;
        }
        td {
            padding: 0;
            background: $gray-lightest;
            &.nonday {
                background-color: $gray-lightest !important;
            }
        }
        td a {
            padding: 7px;
            &:hover,
            &:active,
            &:focus {
                color: $gray-darker;
                background: $color-primary-light !important;
            }
        }
    }
    .today a {
        color: $gray-darker;
        font-weight: normal;
        background-color: $gray-lighter;
    }
}
div.calendarbox {
    width: 256px !important;
    table {
        margin-bottom: 0 !important;
        td {
            height: auto !important;
            padding: 0 !important;
            &.selected {
                a {
                    color: $white;
                    background-color: $color-primary;
                    &:hover {
                        color: $gray-darker;
                    }
                }
            }
        }
        th {
            padding: 10px;
            border-bottom: 0;
        }
        th,
        td {
            font-size: $font-size-normal;
            font-weight: normal;
            line-height: $line-height-normal;
            border-color: $gray-lighter;
            background-color: $white;
            a {
                color: $gray;
                font-family: $base-font-family;
                font-weight: normal;
            }
        }
    }
    .calendarnav-previous,
    .calendarnav-next {
        top: 0;
        text-indent: initial;
        color: $color-primary;
        font-size: 0;
        text-decoration: none;
        padding: 6px 7px;
        background: none;
        &:hover,
        &:focus {
            background: none;
        }
    }
    .calendar-shortcuts {
        font-size: $font-size-small;
        line-height: $line-height-normal;
        width: 100%;
        border-color: $gray-lighter !important;
        background: $white;
        a {
            font-size: $font-size-small !important;
            width: auto;
            margin-top: 0 !important;
            margin-right: 5px !important;
            padding: 9px 10px !important;
            &:first-child {
                margin-left: 5px;
            }
        }
    }
    .calendar-cancel {
        padding: 5px 0 !important;
    }
}
div.calendarbox,
div.clockbox {
    margin: 0;
    padding: 0;
    border: 1px solid $gray-lighter;
    border-radius: $border-radius-base;
    background: $white !important;
    box-shadow: $base-box-shadow;
    caption,
    h2 {
        font-size: $font-size-normal;
    }
    .calendar-cancel {
        font-size: $font-size-small !important;
        line-height: $line-height-normal;
        margin-top: 0 !important;
        border-color: $gray-lighter !important;
        background: $white;

        border-bottom-radius: $border-radius-base;
        a {
            // adds separate color to cancel link to have a clear difference to other links #236
            color: $gray-darkest !important;
        }
    }
}
// clock
div.clockbox {
    border-top-radius: $border-radius-base;
    h2 {
        color: $gray !important;
        font-size: 14px !important;
        font-weight: normal;
        text-transform: uppercase;
        margin-bottom: 0;
        padding: 10px 30px;
        border-radius: $border-radius-base;
        background-color: $white;
        background-image: none;
    }
    .timelist li {
        border-top: solid 1px $gray-lighter;
        &:first-child {
            border-top: 0;
        }
        a {
            font-size: $font-size-normal;
            font-weight: normal;
            line-height: $line-height-normal;
            padding: 10px 2px;
            &:hover {
                background-color: $color-primary-light !important;
            }
        }
    }
    .calendar-cancel {
        padding: 10px 0 !important;
    }
}
.timelist a {
    &,
    &:active,
    &:focus,
    &:hover {
        background: none !important;
    }
}

span.datetimeshortcuts,
.calendar-shortcuts {
    display: inline-block;
    font-size: 0 !important;
    padding: 4px 0 !important;
    margin-left: 0 !important;

    a {
        @include button-variant($btn-action-bgcolor, $btn-action-color, $btn-default-border, true);
        display: inline-block;
        line-height: 14px;
        box-sizing: content-box;
        height: 14px;
        margin-top: 0 !important;
        margin-bottom: 0;
        padding: 10px 16px !important;

        &:before {
            color: $color-primary;
            margin: -2px 0 0;
        }

        &:not(:last-child) {
            margin-right: 5px;
        }
    }
}

// filter horizontal
.selector {
    .selector-chooseall,
    .selector-clearall {
        font-size: $font-size-small;
        line-height: $font-size-normal;
    }
    select {
        overflow: hidden;
    }
}

form select[multiple] {
    overflow: auto;
    width: 100%;
    max-width: 240px;
    padding: 10px;
    // hides dropdown icon which is generally added to select fields #216
    background: none !important;
}
.js-icon-widgets {
    select {
        display: inline-block;
        width: 88% !important;
    }
    .btn {
        width: 10%;
        margin-left: 1%;
        padding: 0 !important;
    }
}

.fa-question-circle:before {
    font-size: $font-size-normal;
}

// adds background color to password and type fields #175
.field-type p {
    margin: 15px 0;
    padding: 10px !important;
    background-color: $gray-lightest;
}
#id_password {
    margin: 15px 0;
    background-color: $gray-lightest;
}
.field-type p:empty {
    // reset background color and padding if field type is empty #186
    padding: 0 !important;
    background-color: transparent;
}

//related-widget
.related-widget-wrapper {
    // required in admin/aldryn_newsblog/article/add to ensure outline is not cut off #249
    overflow: visible;
    display: block;
    width: 100%;
    &.widget-wrapper-links-1 {
        select, .select2 {
            width: calc(100% - 46px) !important;
        }
    }
    &.widget-wrapper-links-2 {
        select, .select2 {
            width: calc(100% - 87px) !important;
        }
    }
    &.widget-wrapper-links-3 {
        select, .select2 {
            width: calc(100% - 128px) !important;
        }
    }
    &.widget-wrapper-links-4 {
        select, .select2 {
            width: calc(100% - 169px) !important;
        }
    }
    // makes sure that related widget wrapper links are floated next to select field #315
    select {
        float: left;
        min-width: inherit !important;
        padding-right: 35px !important;
        margin-right: 10px !important;
    }
    select + .related-widget-wrapper-link,
    .related-widget-wrapper-link + .related-widget-wrapper-link {
        margin: 0;
    }
    .related-widget-wrapper-link + .related-widget-wrapper-link + .related-widget-wrapper-link {
        margin-left: 5px;
        margin-right: 0;
    }
    a {
        margin-top: 0;
        &.change-related {
            margin-right: 5px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    // resets list styles that list looks same as sortedm2m #286
    ul {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        li {
            padding: 0 !important;
            border: 0 !important;
            label {
                color: $gray-darkest !important;
                font-size: 16px;
                line-height: 20px;
                text-transform: none;
                input {
                    vertical-align: middle !important;
                }
            }
        }
        // makes sure that inline list has space between elements and no border #286
        &.inline {
            @include micro-clearfix;
            li {
                margin-right: 10px;
                border: 0;
            }
        }
    }
}
.related-widget-wrapper-link {
    // make sure that add another button has correct width and height on carousel slide plugin #291
    width: 36px;
    height: 36px;
}
.related-widget-wrapper-link {
    opacity: 0.3;
}

.related-widget-wrapper-link:link {
    opacity: 1;
}

.related-widget-wrapper-link:link:focus,
.related-widget-wrapper-link:link:hover {
    opacity: 1;
}