﻿/* ===================================================================
   LAF_Editor_CheckBox bilesenine ait stiller. Onek: 'laf-editor-checkbox-'.
   (LAF_CheckBox kontrolu 'laf-checkbox-' onekini kullanir — karismaz.)

   NOT: Ust (floating) label YOKTUR. Caption, LAF_CheckBox'in kendi inline
   Label'i olarak kutunun yaninda kalir. Outlined border, ust label bos
   kalmis gibi notch'suz duz bir cercevedir; gorunur cizgi transparent
   border + inset shadow ile cizilir (text editor ile ayni teknik).
   =================================================================== */

.laf-editor-checkbox-field {
    position: relative;
    margin-top: 12px;
    margin-bottom: 4px;
    width: 100%;
    font-family: var(--mud-typography-body1-family,'Roboto',sans-serif);
    font-size: var(--mud-typography-body1-size,0.875rem);
}

.laf-editor-checkbox-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0 14px; /* text editor input ile ayni yatay bosluk */
}

.laf-editor-checkbox-control {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

/* =============== OUTLINED =============== */
/* Gorunur cizgi: transparent border + inset shadow (text editor ile ayni).
   Ust label olmadigi icin notch yok; duz dikdortgen cerceve.
   inset:0 → icerik tam ortalanir (label overhang'i yok). */
.laf-editor-checkbox-variant-outlined {
    margin-top: 8px;
}

.laf-editor-checkbox-border {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--LAF-base-border-radius);
    pointer-events: none;
    box-sizing: border-box;
    transition: border-color 200ms cubic-bezier(0.4,0,0.2,1);
    background: var(--LAF-base-editor-background);
    box-shadow: var(--LAF-base-editor-inset);
}

.laf-editor-checkbox-field:not(.laf-editor-checkbox-disabled):not(:focus-within):hover .laf-editor-checkbox-border {
    border-color: var(--mud-palette-text-primary);
}

.laf-editor-checkbox-field:focus-within .laf-editor-checkbox-border {
    border-color: var(--mud-palette-primary-lighten);
    border-width: 2px;
}

/* =============== FILLED =============== */
.laf-editor-checkbox-variant-filled .laf-editor-checkbox-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-checkbox-variant-filled:not(.laf-editor-checkbox-disabled):not(:focus-within):hover .laf-editor-checkbox-wrap {
    border-bottom-color: var(--mud-palette-text-primary);
}

.laf-editor-checkbox-variant-filled:focus-within .laf-editor-checkbox-wrap {
    border-bottom: 2px solid var(--mud-palette-primary);
}

/* =============== TEXT (underline) =============== */
.laf-editor-checkbox-variant-text .laf-editor-checkbox-wrap {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: border-color 200ms cubic-bezier(0.4,0,0.2,1);
}

.laf-editor-checkbox-variant-text:not(.laf-editor-checkbox-disabled):not(:focus-within):hover .laf-editor-checkbox-wrap {
    border-bottom-color: var(--mud-palette-text-primary);
}

.laf-editor-checkbox-variant-text:focus-within .laf-editor-checkbox-wrap {
    border-bottom: 2px solid var(--mud-palette-primary);
}

/* =============== DISABLED =============== */
/* Opacity'yi LAF_CheckBox kendisi uyguluyor; burada tekrar vermeyiz
   (yoksa 0.6 x 0.6 = 0.36 olur). Sadece border + cursor. */
.laf-editor-checkbox-disabled {
    cursor: default;
}

    .laf-editor-checkbox-disabled .laf-editor-checkbox-border {
        border-style: dotted;
    }

    .laf-editor-checkbox-disabled.laf-editor-checkbox-variant-filled .laf-editor-checkbox-wrap,
    .laf-editor-checkbox-disabled.laf-editor-checkbox-variant-text .laf-editor-checkbox-wrap {
        border-bottom-style: dotted;
    }
