@import "legacy";
@import "fields";

/*
------------ FORMS ------------
- Extract from: base.css
- Handle vertical and horizontal forms
*/

#label {
    display: block;
    margin-bottom: $spacing-1;
}

#checkbox-radio {
    align-items: center;
    display: flex;
    margin: $spacing-1 0;
    white-space: nowrap;

    & > .dijit {
        margin-right: $spacing-1;
    }
}

.radio,
.checkbox {
    @extend #checkbox-radio;
}

.required {
    &::after {
        padding-left: 2px;
        content: "*";
        color: $red;
    }
}

#inline-form {
    display: flex;
    align-items: center;

    & > label,
    & > div {
        margin-right: $spacing-1;
        white-space: nowrap;
    }

    & > label {
        line-height: $field-height-md;
        align-self: baseline;
    }

    & > .checkbox,
    & > .radio {
        margin-right: $spacing-1 * 2;

        label {
            line-height: 1;
        }
    }

    & > .checkbox {
        flex: none;
    }

    .dijit {
        margin-right: $spacing-1;

        &:last-child {
            margin-right: 0;
        }
    }

    .dijitRadio,
    .dijitCheckBox {
        margin-right: calc($spacing-1 / 2);
    }
}

.listingTable {
    .radio,
    .checkbox {
        margin: 0;
    }
}

.hint-text {
    font-size: $font-size-xs;
    color: #999;
    display: block;
    line-height: normal;
    margin-top: 5px;
}

// VERTICAL OLD WAY FORMS
dl {
    //margin: 0;

    // Just for the Add/Edit Field form
    // TODO: add a class to style this
    &#indexed,
    &#listed,
    &#required,
    &#unique,
    &#userSearchable {
        dd {
            min-height: auto;
            line-height: normal;

            .dijitCheckBox {
                margin: 0;
            }
        }
    }

    &.vertical {
        dd,
        dt {
            clear: none;
            float: none;
            margin: 0;
            padding: 0;
            text-align: inherit;
            width: auto;
        }

        dt {
            label {
                @extend #label;
            }
        }

        dd {
            margin-bottom: $spacing-1 * 2;
        }
    }

    &.radio-check-one-line {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        margin-bottom: $spacing-1 * 2;

        dt,
        dd {
            float: none;
            margin: 0;
            min-height: 0;
            padding: 0;
            text-align: left;
            width: auto;
        }

        dd {
            .radio,
            .checkbox {
                display: inline-block;
                margin: 0;
            }
        }
    }
}

dd,
dt {
    &.wide {
        clear: both;
        width: auto;
    }
}

dt {
    clear: left;
    float: left;
    padding: 6px 0px 7px;
    text-align: right;
    width: 30%;
}

dd {
    margin: 0 0 $field-padding * 2 30%;
    min-height: $field-height-md;
    padding-left: $field-padding;

    .inputCaption,
    .buttonCaption {
        padding-left: $field-padding !important;
    }
}

// HORIZONTAL NEW FORMS
#form-horizontal-flexbox {
    dl {
        display: flex;
        margin-bottom: $spacing-1;
        min-height: $field-height-md;
    }

    dd,
    dt {
        clear: none;
        float: none;
        margin: 0;
        min-height: 0;
        padding: 0;
        text-align: inherit;
        width: auto;
    }

    dd {
        align-self: center;
    }

    dt {
        line-height: 1;
        // 9px to align correctly vertically
        padding: 9px $spacing-1 * 2 0;
        text-align: right;
        width: 200px;

        &.checkbox,
        &.radio {
            justify-content: flex-end;
            padding-top: 0;
        }
    }
}

#form-horizontal-table {
    display: table;

    & > div {
        display: table-row-group;
    }

    dl {
        display: table-row;
    }

    dd,
    dt {
        display: table-cell;
    }

    dt {
        white-space: nowrap;
        width: 1%;
    }

    dd {
        width: 99%;
    }
}

.form-horizontal {
    @extend #form-horizontal-flexbox;
}

// INLINE FORM

.inline-form {
    @extend #inline-form;
}

// EDIT CONTENT FORMS

.field {
    &Wrapper {
        margin-bottom: $spacing-1 * 3;
        position: relative;
    }

    &Name {
        @extend #label;

        .hintIcon {
            color: $font-color-base;
        }
    }
}

// ROWS and COLUMNS
.editcontentlet__row {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.editcontentlet__col {
    padding: 0 1rem;

    &:first-child {
        padding-left: 0;
    }
    &:last-child {
        padding-right: 0;
    }
}

// BUTTON ROWS

.buttonRow {
    text-align: center;
    margin: $spacing-1 0;

    &-right {
        text-align: right;
        margin: $spacing-1 0;
    }

    .dijitButton,
    .fakeDojoButton {
        margin: 0 calc($spacing-1 / 2);
    }
}

// WHO CAN USE COMPONENT
// TODO: there is other components like this please unify
.who-can-use {
    border: solid 1px $color-palette-gray-500;
    height: 90px;
    margin-top: $spacing-1;
    padding: $spacing-1;
    overflow-y: auto;
    overflow-x: hidden;
}

.who-can-use__list {
    td {
        padding: calc($spacing-1 / 2);
    }
}
