/**
 * @fileoverview Converter Component Styles
 * @description Material Design 3 style unit converter with input fields
 * and unit selectors. Implements outlined text field style.
 *
 * @module converter
 * @version 1.0.1
 */

/* ==========================================================================
   CONVERTER COMPONENT (BEM)
   Block: .converter
   ========================================================================== */

/**
 * Converter container.
 * Uses flexbox column layout with consistent spacing.
 */
.converter {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ======================================================================
   Elements
   ====================================================================== */

/**
 * Category label.
 * Uses Material Design label typography.
 */
.converter__label {
    font: var(--md-text-label-large);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 4px;
}

/**
 * Category selector (Material Design 3 outlined select).
 * Dropdown for selecting conversion category.
 */
.converter__select {
    width: 100%;
    padding: 16px;
    font: var(--md-text-body-large);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 48px;
}

.converter__select:hover {
    border-color: var(--md-sys-color-on-surface);
}

.converter__select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px;
    padding-right: 47px;
}

/**
 * Converter field container.
 * Groups label, input, and unit selector together.
 */
.converter__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/**
 * Field label.
 * Labels for input and output fields.
 */
.converter__field-label {
    font: var(--md-text-label-large);
    color: var(--md-sys-color-on-surface-variant);
}

/**
 * Input group container.
 * Flexbox container for input field and unit selector side by side.
 */
.converter__input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/**
 * Number input field (Material Design 3 outlined text field).
 * Text input for entering the value to convert.
 */
.converter__input {
    flex: 1;
    padding: 16px;
    font: var(--md-text-body-large);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    transition: border-color 0.2s ease;
}

.converter__input:hover:not(:disabled) {
    border-color: var(--md-sys-color-on-surface);
}

.converter__input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px;
}

.converter__input:disabled {
    border-color: var(--md-sys-color-outline-variant);
    background-color: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
    opacity: 0.6;
}

.converter__input[readonly] {
    background-color: var(--md-sys-color-surface-container);
    cursor: default;
    border-color: var(--md-sys-color-outline-variant);
}

.converter__input[readonly]:hover {
    border-color: var(--md-sys-color-outline-variant);
}

.converter__input[readonly]:focus {
    border-color: var(--md-sys-color-outline-variant);
    border-width: 1px;
    padding: 16px;
}

/**
 * Unit selector (Material Design 3 outlined select).
 * Dropdown for selecting the unit of measurement.
 */
.converter__unit-select {
    min-width: 120px;
    padding: 16px 48px 16px 16px;
    font: var(--md-text-body-large);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.converter__unit-select:hover {
    border-color: var(--md-sys-color-on-surface);
}

.converter__unit-select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px;
    padding-right: 47px;
}