/* =============================================================================
   Email Compose Dialog — mw-em-compose-* prefix
   Three-panel layout: template browser (left), preview (center), config (right)
   Loaded via Assets["mw-em-compose.css"] in App.razor
   ============================================================================= */

/* ============================================================
   THEME TOKENS — scoped to the compose dialog
   ============================================================ */
.mw-em-compose-body {
    --mw-emc-preview-bg:        #ECEFF1;
    --mw-emc-preview-frame-bg:  #fff;
    --mw-emc-border:            var(--mud-palette-lines-default);
    --mw-emc-hover:             var(--mud-palette-background-gray);
    --mw-emc-selected-bg:       color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --mw-emc-selected-border:   var(--mud-palette-primary);
    --mw-emc-text:              var(--mud-palette-text-primary);
    --mw-emc-text-dim:          var(--mud-palette-text-secondary);
    --mw-emc-accent:            var(--mud-palette-primary);
    --mw-emc-purple:            #7C4DFF;
    --mw-emc-purple-soft:       color-mix(in srgb, #7C4DFF 12%, transparent);
    --mw-emc-indigo:            #5C6BC0;
    --mw-emc-indigo-soft:       color-mix(in srgb, #5C6BC0 14%, transparent);
    --mw-emc-danger:            var(--mud-palette-error);
    --mw-emc-radius:            6px;
    --mw-emc-transition:        200ms ease;
    --mw-emc-mono:              'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   NOTE: Layout — three-panel flex row filling dialog content
   ============================================================ */
.mw-em-compose-body {
    display: flex;
    flex-direction: row;
    height: 70vh;
    max-height: 750px;
    min-height: 400px;
    overflow: hidden;
}

/* NOTE: Left panel — template browser (280px fixed) */
.mw-em-compose-left {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mw-emc-border);
    overflow: hidden;
    background: var(--mud-palette-surface);
}

/* NOTE: Center panel — preview area (flexible) */
.mw-em-compose-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* NOTE: Right panel — variables / recipients / attachments (300px fixed) */
.mw-em-compose-right {
    width: 300px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mw-emc-border);
    overflow-y: auto;
    background: var(--mud-palette-surface);
}

/* ============================================================
   NOTE: Template list — left panel
   ============================================================ */

/* NOTE: Search field wrapper */
.mw-em-compose-search {
    padding: 12px 10px 12px;
    border-bottom: 1px solid var(--mw-emc-border);
    flex-shrink: 0;
}

/* NOTE: Scrollable template list */
.mw-em-compose-templates {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mw-emc-text-dim) 30%, transparent) transparent;
}

.mw-em-compose-templates::-webkit-scrollbar {
    width: 4px;
}

.mw-em-compose-templates::-webkit-scrollbar-track {
    background: transparent;
}

.mw-em-compose-templates::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mw-emc-text-dim) 30%, transparent);
    border-radius: 2px;
}

/* NOTE: Individual template item */
.mw-em-compose-template {
    padding: 12px;
    border-radius: var(--mw-emc-radius);
    cursor: pointer;
    transition: background-color var(--mw-emc-transition);
    border: 1px solid transparent;
    margin-bottom: 2px;
}

.mw-em-compose-template:hover {
    background-color: var(--mw-emc-hover);
}

/* NOTE: Selected template — primary tint + left border accent */
.mw-em-compose-template--selected {
    background-color: var(--mw-emc-selected-bg);
    border-color: var(--mw-emc-selected-border);
}

.mw-em-compose-template--selected:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

/* NOTE: Template name */
.mw-em-compose-template-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mw-emc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

/* NOTE: Template metadata row (category, date, etc.) */
.mw-em-compose-template-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--mw-emc-text-dim);
}

/* NOTE: Variable count badge — small purple pill */
.mw-em-compose-var-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: var(--mw-emc-purple-soft);
    color: var(--mw-emc-purple);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}

/* ============================================================
   NOTE: Preview toolbar — above the preview area
   ============================================================ */
.mw-em-compose-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--mw-emc-border);
    flex-shrink: 0;
    background: var(--mud-palette-surface);
}

.mw-em-compose-toolbar-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* NOTE: Vertical separator between toolbar groups */
.mw-em-compose-toolbar-sep {
    width: 1px;
    height: 24px;
    background-color: var(--mw-emc-border);
    flex-shrink: 0;
}

/* NOTE: Uppercase tracking label */
.mw-em-compose-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mw-emc-text-dim);
    white-space: nowrap;
    user-select: none;
}

/* NOTE: Zoom slider — range input */
.mw-em-compose-zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mw-emc-text-dim) 25%, transparent);
    outline: none;
    cursor: pointer;
}

.mw-em-compose-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mw-emc-accent);
    cursor: pointer;
    border: 2px solid var(--mw-emc-preview-frame-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--mw-emc-transition);
}

.mw-em-compose-zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.mw-em-compose-zoom-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mw-emc-accent);
    cursor: pointer;
    border: 2px solid var(--mw-emc-preview-frame-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* NOTE: Zoom percentage readout */
.mw-em-compose-zoom-value {
    font-family: var(--mw-emc-mono);
    font-size: 12px;
    min-width: 36px;
    text-align: center;
    color: var(--mw-emc-text-dim);
    user-select: none;
}

/* NOTE: Small outlined toolbar button */
.mw-em-compose-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mw-emc-radius);
    border: 1px solid var(--mw-emc-border);
    background: transparent;
    color: var(--mw-emc-text-dim);
    cursor: pointer;
    transition: all var(--mw-emc-transition);
    padding: 0;
}

.mw-em-compose-toolbar-btn:hover {
    background: var(--mw-emc-hover);
    color: var(--mw-emc-text);
}

.mw-em-compose-toolbar-btn--active {
    background: var(--mw-emc-accent);
    border-color: var(--mw-emc-accent);
    color: #fff;
}

.mw-em-compose-toolbar-btn--active:hover {
    background: color-mix(in srgb, var(--mw-emc-accent) 85%, #000);
    color: #fff;
}

/* NOTE: Device toggle — segmented button group */
.mw-em-compose-device-toggle {
    display: inline-flex;
    border: 1px solid var(--mw-emc-border);
    border-radius: var(--mw-emc-radius);
    overflow: hidden;
}

.mw-em-compose-device-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--mw-emc-text-dim);
    cursor: pointer;
    transition: all var(--mw-emc-transition);
    padding: 0;
}

.mw-em-compose-device-btn + .mw-em-compose-device-btn {
    border-left: 1px solid var(--mw-emc-border);
}

.mw-em-compose-device-btn:hover {
    background: var(--mw-emc-hover);
    color: var(--mw-emc-text);
}

.mw-em-compose-device-btn--active {
    background: var(--mw-emc-accent);
    color: #fff;
}

.mw-em-compose-device-btn--active:hover {
    background: color-mix(in srgb, var(--mw-emc-accent) 85%, #000);
    color: #fff;
}

/* ============================================================
   NOTE: Preview area — centered frame with zoom/pan
   ============================================================ */
.mw-em-compose-preview-area {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background: var(--mw-emc-preview-bg);
    padding: 24px;
    position: relative;
}

/* NOTE: Pannable state — grab cursor */
.mw-em-compose-preview-area--pannable {
    cursor: grab;
}

/* NOTE: Actively panning — grabbing cursor */
.mw-em-compose-preview-area--panning {
    cursor: grabbing;
    user-select: none;
}

/* NOTE: Preview frame — simulated browser window */
.mw-em-compose-preview-frame {
    background: var(--mw-emc-preview-frame-bg);
    border-radius: 8px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.04);
    transition: width var(--mw-emc-transition), transform var(--mw-emc-transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
}

/* NOTE: Browser chrome header with traffic light dots */
.mw-em-compose-preview-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
    flex-shrink: 0;
}

.mw-em-compose-preview-header::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF5F57;
    box-shadow:
        16px 0 0 #FFBD2E,
        32px 0 0 #28CA41;
}

/* NOTE: Preview content area */
.mw-em-compose-preview-content {
    overflow-y: auto;
    max-height: 680px;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mw-emc-text-dim) 20%, transparent) transparent;
}

.mw-em-compose-preview-content::-webkit-scrollbar {
    width: 4px;
}

.mw-em-compose-preview-content::-webkit-scrollbar-track {
    background: transparent;
}

.mw-em-compose-preview-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mw-emc-text-dim) 20%, transparent);
    border-radius: 2px;
}

/* NOTE: Empty state — no template selected */
.mw-em-compose-no-template {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 40px;
    color: var(--mw-emc-text-dim);
    text-align: center;
}

.mw-em-compose-no-template .mud-icon-root {
    font-size: 48px !important;
    opacity: 0.4;
}

/* ============================================================
   NOTE: Right panel — section containers
   ============================================================ */
.mw-em-compose-section {
    padding: 4px 16px 16px;
    border-bottom: 1px solid var(--mw-emc-border);
}

.mw-em-compose-section:last-child {
    border-bottom: none;
}

/* NOTE: Section header — uppercase label + optional count badge */
.mw-em-compose-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mw-em-compose-section-header h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mw-emc-text-dim);
    margin: 0;
    line-height: 1;
}

/* NOTE: Section count — small pill */
.mw-em-compose-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mw-emc-text-dim) 15%, transparent);
    color: var(--mw-emc-text-dim);
    line-height: 1;
}

/* ============================================================
   NOTE: Auto-filled variables — collapsible section
   ============================================================ */

/* NOTE: Collapsible toggle header */
.mw-em-compose-auto-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--mw-emc-radius);
    background: color-mix(in srgb, var(--mw-emc-text-dim) 8%, transparent);
    cursor: pointer;
    transition: background-color var(--mw-emc-transition);
    user-select: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--mw-emc-text-dim);
    margin-bottom: 8px;
}

.mw-em-compose-auto-toggle:hover {
    background: color-mix(in srgb, var(--mw-emc-text-dim) 14%, transparent);
}

/* NOTE: Chevron rotation on expand */
.mw-em-compose-auto-toggle .mud-icon-root {
    transition: transform var(--mw-emc-transition);
}

.mw-em-compose-auto-toggle--expanded .mud-icon-root {
    transform: rotate(180deg);
}

/* NOTE: Collapsible auto-variable list */
.mw-em-compose-auto-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.mw-em-compose-auto-list--expanded {
    max-height: 300px;
    overflow-y: auto;
}

/* NOTE: Individual auto-filled variable row */
.mw-em-compose-auto-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color var(--mw-emc-transition);
}

.mw-em-compose-auto-item:hover {
    background: var(--mw-emc-hover);
}

/* NOTE: Variable name — monospace */
.mw-em-compose-auto-name {
    font-family: var(--mw-emc-mono);
    font-size: 11px;
    color: var(--mw-emc-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NOTE: "auto" chip — small indigo pill */
.mw-em-compose-auto-chip {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--mw-emc-indigo-soft);
    color: var(--mw-emc-indigo);
    flex-shrink: 0;
    line-height: 1.4;
}

/* ============================================================
   NOTE: Manual variable fields
   ============================================================ */
.mw-em-compose-var-field {
    margin-bottom: 10px;
}

.mw-em-compose-var-field:last-child {
    margin-bottom: 0;
}

.mw-em-compose-var-field label {
    display: block;
    font-family: var(--mw-emc-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--mw-emc-text-dim);
    margin-bottom: 4px;
}

.mw-em-compose-var-field input {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--mw-emc-text);
    background: transparent;
    border: 1px solid var(--mw-emc-border);
    border-radius: var(--mw-emc-radius);
    outline: none;
    transition: border-color var(--mw-emc-transition), box-shadow var(--mw-emc-transition);
}

.mw-em-compose-var-field input:focus {
    border-color: var(--mw-emc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-emc-accent) 15%, transparent);
}

.mw-em-compose-var-field input::placeholder {
    color: color-mix(in srgb, var(--mw-emc-text-dim) 60%, transparent);
}

/* ============================================================
   NOTE: Recipients list
   ============================================================ */
.mw-em-compose-recipients {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mw-emc-text-dim) 20%, transparent) transparent;
}

.mw-em-compose-recipients::-webkit-scrollbar {
    width: 4px;
}

.mw-em-compose-recipients::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mw-emc-text-dim) 20%, transparent);
    border-radius: 2px;
}

/* NOTE: Individual recipient row */
.mw-em-compose-recipient {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--mw-emc-radius);
    transition: background-color var(--mw-emc-transition);
}

.mw-em-compose-recipient:hover {
    background: var(--mw-emc-hover);
    cursor: pointer;
}

.mw-em-compose-recipient--active {
    background: var(--mw-emc-selected-bg);
    border: 1px solid var(--mw-emc-selected-border);
}

/* NOTE: Recipient avatar — small colored circle */
.mw-em-compose-recipient-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* NOTE: Recipient name */
.mw-em-compose-recipient-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--mw-emc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NOTE: Recipient email */
.mw-em-compose-recipient-email {
    font-family: var(--mw-emc-mono);
    font-size: 11px;
    color: var(--mw-emc-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   NOTE: Attachments
   ============================================================ */

/* NOTE: Drop zone — dashed border area */
.mw-em-compose-dropzone {
    border: 2px dashed var(--mw-emc-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: var(--mw-emc-text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--mw-emc-transition);
}

.mw-em-compose-dropzone:hover {
    border-color: color-mix(in srgb, var(--mw-emc-text-dim) 50%, transparent);
}

/* NOTE: Drag-over state — blue accent */
.mw-em-compose-dropzone--dragover {
    border-color: var(--mw-emc-accent);
    background: color-mix(in srgb, var(--mw-emc-accent) 6%, transparent);
    color: var(--mw-emc-accent);
}

/* NOTE: Attached file row */
.mw-em-compose-file {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--mw-emc-radius);
    transition: background-color var(--mw-emc-transition);
}

.mw-em-compose-file:hover {
    background: var(--mw-emc-hover);
}

.mw-em-compose-file-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.mw-em-compose-file-icon {
    color: var(--mw-emc-text-dim);
    flex-shrink: 0;
}

.mw-em-compose-file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--mw-emc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-em-compose-file-size {
    font-family: var(--mw-emc-mono);
    font-size: 11px;
    color: var(--mw-emc-text-dim);
    flex-shrink: 0;
}

/* NOTE: File remove button — small red icon button */
.mw-em-compose-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--mw-emc-text-dim);
    cursor: pointer;
    transition: all var(--mw-emc-transition);
    padding: 0;
    flex-shrink: 0;
}

.mw-em-compose-file-remove:hover {
    background: color-mix(in srgb, var(--mw-emc-danger) 12%, transparent);
    color: var(--mw-emc-danger);
}

/* ============================================================
   NOTE: Footer — send bar
   ============================================================ */
.mw-em-compose-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid var(--mw-emc-border);
    background: var(--mud-palette-surface);
    flex-shrink: 0;
}

.mw-em-compose-footer-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--mw-emc-text-dim);
    font-size: 12px;
}

/* NOTE: Footer badge — small pill with count */
.mw-em-compose-footer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mw-emc-accent) 14%, transparent);
    color: var(--mw-emc-accent);
    line-height: 1;
}

/* NOTE: Send button — filled primary */
.mw-em-compose-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    border: none;
    border-radius: var(--mw-emc-radius);
    background: var(--mw-emc-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mw-emc-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 8px color-mix(in srgb, var(--mw-emc-accent) 25%, transparent);
}

.mw-em-compose-send-btn:hover {
    background: color-mix(in srgb, var(--mw-emc-accent) 85%, #000);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 4px 12px color-mix(in srgb, var(--mw-emc-accent) 30%, transparent);
}

.mw-em-compose-send-btn:active {
    transform: translateY(1px);
}

/* NOTE: Disabled send button */
.mw-em-compose-send-btn--disabled {
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

/* ============================================================
   NOTE: Thin custom scrollbar — global for right panel
   ============================================================ */
.mw-em-compose-right::-webkit-scrollbar {
    width: 4px;
}

.mw-em-compose-right::-webkit-scrollbar-track {
    background: transparent;
}

.mw-em-compose-right::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mw-emc-text-dim) 25%, transparent);
    border-radius: 2px;
}

.mw-em-compose-right {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mw-emc-text-dim) 25%, transparent) transparent;
}

/* ============================================================
   NOTE: Smooth transitions — shared animation timing
   ============================================================ */
.mw-em-compose-template,
.mw-em-compose-toolbar-btn,
.mw-em-compose-device-btn,
.mw-em-compose-preview-frame,
.mw-em-compose-recipient,
.mw-em-compose-file,
.mw-em-compose-auto-item,
.mw-em-compose-dropzone,
.mw-em-compose-send-btn,
.mw-em-compose-file-remove {
    transition-duration: 200ms;
    transition-timing-function: ease;
}