/* ===================================================================
   LAF_Editor_Text bilesenine ait stiller.
   Tum sinif isimleri 'laf-editor-' onekiyle izole edilmistir.
   index.html'de bir kez referanslanir; bilesen markup'inda <style> YOKTUR.
   =================================================================== */

/* =============== LAYOUT =============== */
.laf-editor-field {
    position: relative;
    margin-top: 12px;
    margin-bottom: 4px;
    font-family: var(--mud-typography-body1-family,'Roboto',sans-serif);
    font-size: var(--mud-typography-body1-size,0.875rem);
}

.laf-editor-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* =============== LEFT ICON =============== */
.laf-editor-left-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 12px;
    margin-top: -1px;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.laf-editor-wrap:focus-within .laf-editor-left-icon {
    color: var(--mud-palette-primary);
}

.laf-editor-has-left-icon .laf-editor-input {
    padding-left: 8px;
}

.laf-editor-has-left-icon .laf-editor-lbl {
    left: 40px;
}

.laf-editor-has-left-icon.laf-editor-variant-outlined.laf-editor-field:focus-within .laf-editor-lbl,
.laf-editor-has-left-icon.laf-editor-variant-outlined .laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-has-left-icon.laf-editor-variant-outlined.laf-editor-has-value .laf-editor-lbl {
    left: 14px;
}

/* =============== INPUT =============== */
.laf-editor-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    line-height: 1.4375em;
    padding: 7px 14px 10px 14px;
    box-sizing: border-box;
}

    .laf-editor-input:disabled {
        color: var(--mud-palette-text-disabled);
    }

    .laf-editor-input[type="search"]::-webkit-search-cancel-button,
    .laf-editor-input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .laf-editor-input[type="search"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }

textarea.laf-editor-input {
    resize: none;
    min-height: 65px;
    overflow: hidden;
}

.laf-editor-upper {
    text-transform: uppercase;
}

.laf-editor-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.42;
    transition: opacity 120ms;
}

.laf-editor-has-caption:not(:focus-within):not(.laf-editor-has-value) .laf-editor-input::placeholder {
    opacity: 0;
}

/* =============== LABEL =============== */
.laf-editor-lbl {
    position: absolute;
    left: 17px;
    top: 0;
    z-index: 1;
    transform: translate(0, 9px) scale(1);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transition: color 200ms cubic-bezier(0,0,0.2,1), transform 200ms cubic-bezier(0,0,0.2,1), max-width 200ms cubic-bezier(0,0,0.2,1);
    transform-origin: left top;
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.laf-editor-wrap:focus-within > .laf-editor-lbl,
.laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-has-value .laf-editor-lbl {
    transform: translate(0, -10px) scale(0.75);
    max-width: calc(133% - 32px);
}

.laf-editor-wrap:focus-within > .laf-editor-lbl {
    color: var(--mud-palette-primary);
}

/* =============== OUTLINED =============== */
.laf-editor-border {
    position: absolute;
    inset: -4px 0 0;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius,4px);
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 200ms cubic-bezier(0.4,0,0.2,1);
    /*    background: var(--mud-palette-surface);
*/
    background: var(--LAF-base-editor-background);
    box-shadow: var(--LAF-base-editor-inset);
}



.laf-editor-notch {
    float: unset;
    width: auto;
    overflow: hidden;
    display: block;
    padding: 0;
    height: 0;
    font-size: 0.75em;
    visibility: hidden;
    max-width: 0.01px;
    transition: max-width 50ms cubic-bezier(0,0,0.2,1) 0ms;
    white-space: nowrap;
}

    .laf-editor-notch > span {
        padding: 0 6px;
        display: inline-block;
    }

.laf-editor-wrap:focus-within .laf-editor-notch,
.laf-editor-input:not(:placeholder-shown) ~ .laf-editor-border .laf-editor-notch,
.laf-editor-has-value .laf-editor-notch {
    max-width: 100%;
    transition: max-width 100ms cubic-bezier(0,0,0.2,1) 50ms;
}

.laf-editor-field:not(.laf-editor-disabled):not(:focus-within):hover .laf-editor-border {
    border-color: var(--mud-palette-text-primary);
}

.laf-editor-field:focus-within .laf-editor-border {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
}

.laf-editor-variant-outlined .laf-editor-lbl {
    left: 18px;
}

.laf-editor-variant-outlined:not(:focus-within):not(.laf-editor-has-value) .laf-editor-lbl {
    top: -3px;
}

.laf-editor-variant-outlined.laf-editor-field:focus-within .laf-editor-lbl,
.laf-editor-variant-outlined .laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-variant-outlined.laf-editor-has-value .laf-editor-lbl {
    padding: 0 8px;
    left: 11px;
    /*    background: linear-gradient(to bottom, transparent 0%, var(--mud-palette-surface) 65%);
*/
    background: linear-gradient(to bottom, transparent 0%, var(--LAF-base-editor-background) 65%);
}


/* =============== FILLED =============== */
.laf-editor-variant-filled .laf-editor-wrap {
    background: var(--mud-palette-background-grey,rgba(0,0,0,0.06));
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: border-color 200ms cubic-bezier(0.4,0,0.2,1);
}

.laf-editor-variant-filled:not(.laf-editor-disabled):not(:focus-within):hover .laf-editor-wrap {
    border-bottom-color: var(--mud-palette-text-primary);
}

.laf-editor-variant-filled:focus-within .laf-editor-wrap {
    border-bottom: 2px solid var(--mud-palette-primary);
}

.laf-editor-variant-filled .laf-editor-input {
    padding: 20px 12px 6px;
}

.laf-editor-variant-filled .laf-editor-lbl {
    left: 12px;
    transform: translate(0,16px) scale(1);
}

.laf-editor-variant-filled .laf-editor-wrap:focus-within > .laf-editor-lbl,
.laf-editor-variant-filled .laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-variant-filled.laf-editor-has-value .laf-editor-lbl {
    transform: translate(0,4px) scale(0.75);
}

.laf-editor-has-left-icon.laf-editor-variant-filled .laf-editor-lbl {
    left: 40px;
}

.laf-editor-has-left-icon.laf-editor-variant-filled .laf-editor-wrap:focus-within > .laf-editor-lbl,
.laf-editor-has-left-icon.laf-editor-variant-filled .laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-has-left-icon.laf-editor-variant-filled.laf-editor-has-value .laf-editor-lbl {
    left: 40px;
}

/* =============== TEXT (underline) =============== */
.laf-editor-variant-text .laf-editor-wrap {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: border-color 200ms cubic-bezier(0.4,0,0.2,1);
}

.laf-editor-variant-text:not(.laf-editor-disabled):not(:focus-within):hover .laf-editor-wrap {
    border-bottom-color: var(--mud-palette-text-primary);
}

.laf-editor-variant-text:focus-within .laf-editor-wrap {
    border-bottom: 2px solid var(--mud-palette-primary);
}

.laf-editor-variant-text .laf-editor-input {
    padding: 6px 0 6px;
}

.laf-editor-variant-text .laf-editor-lbl {
    left: 0;
    transform: translate(0,16px) scale(1);
}

.laf-editor-variant-text .laf-editor-wrap:focus-within > .laf-editor-lbl,
.laf-editor-variant-text .laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-variant-text.laf-editor-has-value .laf-editor-lbl {
    transform: translate(0,2px) scale(0.75);
}

.laf-editor-has-left-icon.laf-editor-variant-text .laf-editor-left-icon {
    margin-left: 0;
}

.laf-editor-has-left-icon.laf-editor-variant-text .laf-editor-lbl {
    left: 28px;
}

.laf-editor-has-left-icon.laf-editor-variant-text .laf-editor-wrap:focus-within > .laf-editor-lbl,
.laf-editor-has-left-icon.laf-editor-variant-text .laf-editor-input:not(:placeholder-shown) ~ .laf-editor-lbl,
.laf-editor-has-left-icon.laf-editor-variant-text.laf-editor-has-value .laf-editor-lbl {
    left: 28px;
}

/* =============== CLEAR BUTTON =============== */
.laf-editor-clear {
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: -2px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 4px;
    color: var(--mud-palette-action-default);
    border-radius: 50%;
    flex-shrink: 0;
}

    .laf-editor-clear:hover {
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-action-default-hover,rgba(0,0,0,0.04));
    }

.laf-editor-clear-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.laf-editor-input:not(:placeholder-shown) ~ .laf-editor-clear,
.laf-editor-has-value .laf-editor-clear {
    display: flex;
}

.laf-editor-no-clear .laf-editor-clear,
.laf-editor-disabled .laf-editor-clear {
    display: none !important;
}

/* =============== ADORNMENT BUTTONS =============== */
.laf-editor-adornment {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-top: -2px;
    margin-right: 2px;
    color: var(--mud-palette-action-default);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 150ms cubic-bezier(0.4,0,0.2,1), color 150ms cubic-bezier(0.4,0,0.2,1);
}

    .laf-editor-adornment:hover {
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-action-default-hover,rgba(0,0,0,0.04));
    }

    .laf-editor-adornment:active {
        background: rgba(0,0,0,0.08);
    }

    .laf-editor-adornment:last-of-type {
        margin-right: 8px;
    }

    .laf-editor-adornment:disabled {
        pointer-events: none;
        opacity: 0.42;
        cursor: default;
    }

.laf-editor-adornment-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.laf-editor-disabled .laf-editor-adornment {
    pointer-events: none;
    opacity: 0.62;
}

/* =============== DISABLED =============== */
.laf-editor-disabled {
    pointer-events: none;
    opacity: 0.62;
}

    .laf-editor-disabled .laf-editor-border {
        border-style: dotted;
    }

.laf-editor-input,
.laf-editor-left-icon,
.laf-editor-clear,
.laf-editor-adornment {
    position: relative;
    z-index: 1;
}