/* ===================================================================
   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.

   Outline / arka plan / hover-focus / transition / padding / yukseklik
   laf_editor_styles.css token'larindan gelir (tek kaynak).
   Tek satir input: ORTAK yukseklik + border kutusunun dikey merkezine
   hizalanmis metin/placeholder/label. textarea (MultiLine) HARIC.
   =================================================================== */

/* =============== LAYOUT =============== */
.laf-editor-field {
    position: relative;
    margin-top: 8px;
    margin-bottom: 0px;
    font-family: var(--LAF-default-font-family);
    font-size: var(--LAF-default-font-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(--LAF-palette-text-secondary);
    pointer-events: none;
}

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

.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(--LAF-palette-text);
    font: inherit;
    line-height: 1.4375em;
    padding: var(--LAF-editor-padding);
    padding-right:0px;
    box-sizing: border-box;
}

    .laf-editor-input:disabled {
        color: var(--LAF-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;
    }

/* === TEK SATIR: ORTAK YUKSEKLIK + DIKEY ORTALAMA (yukseklikten bagimsiz) ===
   textarea (MultiLine) ve filled bu kuralin DISINDA. */
.laf-editor-variant-outlined input.laf-editor-input,
.laf-editor-variant-text input.laf-editor-input {
    height: var(--LAF-editor-height);
    padding-top: 0;
    padding-bottom: 0;
}

/* Outlined'da gorunur border kutusu ustte 4px tasiyor (.laf-editor-border inset:-4px).
   Metni o kutunun tam ortasina indirmek icin alt padding'e tasma kadar ekle.
   Ofset SABIT oldugundan her yukseklikte ortalama korunur:
   content merkezi = H/2 - overhang/2 = border merkezi. */
.laf-editor-variant-outlined input.laf-editor-input {
    padding-bottom: var(--LAF-editor-border-overhang-top);
}

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

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

.laf-editor-input::placeholder {
    color: var(--LAF-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, var(--LAF-editor-label-rest-y)) scale(1);
    color: var(--LAF-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(--LAF-palette-primary-lighten);
}

/* =============== OUTLINED =============== */
.laf-editor-border {
    position: absolute;
    inset: -4px 0 0;
    margin: 0;
    padding: 0 10px;
    border-width: var(--LAF-editor-outline-width);
    border-color: var(--LAF-editor-outline-color);
    border-radius: var(--LAF-editor-radius);
/*    border-style:inset;*/
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
/*    transition: border 0.20s ease-in-out;*/
    background: var(--LAF-editor-bg);
/*    box-shadow: var(--LAF-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-width: var(--LAF-editor-outline-width-hover);*/
    border-color: var(--LAF-editor-outline-color-hover);
}

.laf-editor-field:focus-within .laf-editor-border {
/*    border-width: var(--LAF-editor-outline-width-focus);*/
    border-color: var(--LAF-editor-outline-color-focus);
}

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

/* TEK SATIR dinlenme label'i: border kutusunun dikey merkezine, ama top:0 SABIT
   kalir → hareket tamamen transform ile olur, dolayisiyla float animasyonu akici.
   Merkez ofseti yukseklikten turer, sabit degil. */
.laf-editor-variant-outlined:not(:focus-within):not(.laf-editor-has-value):has(input.laf-editor-input) .laf-editor-lbl {
    transform: translate(0, calc(var(--LAF-editor-height) / 2 - var(--LAF-editor-border-overhang-top) / 2 - 0.6em)) scale(1);
}

/* MULTILINE dinlenme label'i: ortalama YOK, textarea'nin ilk satiriyla ustte hizali. */
.laf-editor-variant-outlined:not(:focus-within):not(.laf-editor-has-value):has(textarea.laf-editor-input) .laf-editor-lbl {
    transform: translate(0, var(--LAF-editor-label-rest-y)) scale(1);
}

.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;
    top: 0;
/*    background: linear-gradient(to bottom, transparent 0%, var(--LAF-editor-bg) 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(--LAF-palette-lines);
    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(--LAF-palette-primary-lighten);
}

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

.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(--LAF-palette-lines);
    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(--LAF-palette-primary-lighten);
}

.laf-editor-variant-text:focus-within .laf-editor-wrap {
    border-bottom: 2px solid var(--LAF-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: -4px;
    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(--LAF-palette-primary);
        background: var(--LAF-palette-hover);
    }

.laf-editor-clear-icon {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--LAF-palette-error);
}

.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: -4px;
    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(--LAF-palette-primary);
        background: var(--LAF-palette-hover);
    }

    .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;
    color:var(--LAF-palette-text-secondary);
}

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