/**
 * Copyright (c) Enalean, 2016 - Present. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@use "sass:math";
@use "./form-element" as element;

$assets-base-path: "../../../" !default;

@use "./selects" with (
    $assets-base-path: $assets-base-path
);
@use "./labels";
@use "./inputs";

@function asset-url($file_path) {
    @return url(#{$assets-base-path + $file_path});
}

.tlp-form-element {
    margin: 0 0 var(--tlp-medium-spacing);

    &:last-child,
    > .tlp-form-element {
        margin: 0;
    }

    > .tlp-text-muted,
    > .tlp-text-info,
    > .tlp-text-success,
    > .tlp-text-warning,
    > .tlp-text-danger {
        margin: 6px 0 0;
        font-size: 0.75rem;
        line-height: 1rem;
    }

    &.tlp-form-element-disabled {
        opacity: 0.5;

        > .tlp-label,
        > .tlp-input,
        > .tlp-search,
        > .tlp-textarea,
        > .tlp-select,
        > .tlp-checkbox,
        > .tlp-checkbox > input,
        > .tlp-radio,
        > .tlp-radio > input {
            cursor: not-allowed;
        }
    }

    &.tlp-form-element-error {
        > .tlp-label {
            color: var(--tlp-danger-dark-color);
        }

        > .tlp-input,
        > .tlp-textarea,
        > .tlp-select {
            border-color: var(--tlp-danger-color);
            color: var(--tlp-danger-dark-color);

            &:focus {
                box-shadow: var(--tlp-shadow-focus-error);
            }
        }
    }
}

/**
 * Property
 */
.tlp-property {
    margin: 0 0 var(--tlp-medium-spacing);

    &:last-child {
        margin: 0;
    }

    > .tlp-label {
        cursor: default;
    }
}

.tlp-property-empty {
    color: var(--tlp-dimmed-color);
    font-style: italic;
}

/**
 * Inputs
 */
%-tlp-form-element {
    @include element.tlp-form-element;
}

.tlp-search {
    @extend %-tlp-form-element;

    height: var(--tlp-form-element-height);
    padding: 0 15px 0 33px;
    border-radius: calc(var(--tlp-form-element-height) / 2);
    background: var(--tlp-form-element-background) asset-url("images/field-magnifier.svg") no-repeat;
    background-position: 13px center;

    &::-webkit-search-decoration {
        display: none;
    }

    &[size] {
        width: auto;
    }

    &.tlp-search-small {
        height: var(--tlp-form-element-small-height);
        padding: 0 10px 0 26px;
        border-radius: calc(var(--tlp-form-element-small-height) / 2);
        background: var(--tlp-form-element-background) asset-url("images/field-magnifier-small.svg")
            no-repeat;
        background-position: 10px center;
        font-size: var(--tlp-form-element-small-font-size);
    }

    &.tlp-search-large {
        height: element.$tlp-form-element-large-height;
        padding: 0 22px 0 40px;
        border-radius: math.div(element.$tlp-form-element-large-height, 2);
        background: var(--tlp-form-element-background) asset-url("images/field-magnifier-large.svg")
            no-repeat;
        background-position: 18px center;
        font-size: element.$tlp-form-element-large-font-size;
    }
}

.tlp-textarea {
    @extend %-tlp-form-element;

    padding: 8px var(--tlp-form-element-padding-horizontal);
    overflow: auto;

    &[cols] {
        width: auto;
    }

    &.tlp-textarea-small {
        padding: 6px element.$tlp-form-element-small-padding-horizontal;
        font-size: var(--tlp-form-element-small-font-size);
    }

    &.tlp-textarea-large {
        padding: 12px element.$tlp-form-element-large-padding-horizontal;
        font-size: element.$tlp-form-element-large-font-size;
    }
}

.tlp-checkbox {
    line-height: 14px;
}

.tlp-checkbox,
.tlp-radio {
    margin: 0 0 var(--tlp-small-spacing);

    > input {
        margin: 0 3px 0 0;
        outline: 0 solid transparent;
        vertical-align: bottom;

        &:focus {
            transition: outline-color var(--tlp-form-element-border-transition-duration) linear;
            outline: 1px solid var(--tlp-main-color);
        }
    }

    + .tlp-text-muted,
    + .tlp-text-info,
    + .tlp-text-success,
    + .tlp-text-warning,
    + .tlp-text-danger {
        margin: -5px 0 0 20px;
    }
}

/**
 * Prepend, append
 */
.tlp-form-element-prepend,
.tlp-form-element-append {
    display: flex;
    align-items: center;

    > .tlp-prepend:not([class*="tlp-button"], [class*="tlp-dropdown"]),
    > .tlp-append:not([class*="tlp-button"], [class*="tlp-dropdown"]) {
        display: flex;
        align-items: center;
        height: var(--tlp-form-element-height);
        padding: 0 var(--tlp-form-element-padding-horizontal);
        transition: border-color var(--tlp-form-element-border-transition-duration) linear;
        border: 1px solid var(--tlp-form-element-border-color);
        background: var(--tlp-main-color-transparent-90);
        color: var(--tlp-main-color);
        font-size: var(--tlp-form-element-font-size);
        font-weight: 600;
        vertical-align: middle;

        &.tlp-prepend-small,
        &.tlp-append-small {
            height: var(--tlp-form-element-small-height);
            padding: 0 element.$tlp-form-element-small-padding-horizontal;
            font-size: var(--tlp-form-element-small-font-size);
        }

        &.tlp-prepend-large,
        &.tlp-append-large {
            height: element.$tlp-form-element-large-height;
            padding: 0 element.$tlp-form-element-large-padding-horizontal;
            font-size: element.$tlp-form-element-large-font-size;
        }
    }

    /* stylelint-disable selector-no-qualifying-type */
    > .tlp-prepend[class*="tlp-button"],
    > .tlp-prepend.tlp-dropdown > a[class*="tlp-button"],
    > .tlp-prepend.tlp-dropdown > button[class*="tlp-button"],
    > .tlp-append[class*="tlp-button"],
    > .tlp-append.tlp-dropdown > a[class*="tlp-button"],
    > .tlp-append.tlp-dropdown > button[class*="tlp-button"] {
        box-shadow: 0 1px 2px rgb(0 0 0 / 8%);

        &.tlp-button-outline {
            border-color: var(--tlp-form-element-border-color);
        }
    }
    /* stylelint-enable */
}

.tlp-form-element-prepend {
    > .tlp-prepend {
        z-index: 1;
        flex: 0 0 auto;
        order: 1;
        margin-right: -1px;
        border-radius: 0;

        &:first-child,
        &:first-child > button[class*="tlp-button"] {
            border-radius: var(--tlp-form-element-border-radius) 0 0
                var(--tlp-form-element-border-radius);
        }
    }

    > .tlp-input {
        order: 2;
        min-width: 0;
        border-radius: 0 var(--tlp-form-element-border-radius) var(--tlp-form-element-border-radius)
            0;
    }

    > .tlp-input:not(:first-child, :last-child) {
        border-radius: 0;
    }
}

.tlp-form-element-append {
    > .tlp-append {
        z-index: 1;
        flex: 0 0 auto;
        order: 2;
        margin-left: -1px;
        border-radius: 0;

        &:last-child,
        &:last-child > button[class*="tlp-button"] {
            border-radius: 0 var(--tlp-form-element-border-radius)
                var(--tlp-form-element-border-radius) 0;
        }
    }

    > .tlp-input,
    > .tlp-select {
        order: 1;
        min-width: 0;
        border-radius: var(--tlp-form-element-border-radius) 0 0
            var(--tlp-form-element-border-radius);
    }
}
