/*==================================================
    Specialized form fields
==================================================*/
@layer tm-features {
    
    /*==================================================
        Destination picker 
    ==================================================*/
    .tm-destination-picker {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .tm-destination-picker__selected {
        padding: var(--tm-space-3);
        border-bottom: 1px solid var(--tm-color-border);
        background: var(--tm-color-surface);
    }

    .tm-destination-picker__selected-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--tm-space-2);
        margin-bottom: var(--tm-space-2);
    }

    .tm-destination-tree {
        overflow: auto;
        /* max-height: 24rem; */
        max-height:calc(var(--tm-font-size-base) * 24);
        padding: var(--tm-space-2) var(--tm-space-3) var(--tm-space-3);
    }

    .tm-destination-node {
        display: block;
    }

    .tm-destination-node__row {
        display: flex;
        align-items: center;
        gap: var(--tm-space-2);
        /*min-height: 2.75rem;*/
        min-height: calc(var(--tm-font-size-base) * 2.75);

    }

    .tm-destination-node__toggle {
        /*width: 2rem;
        min-width: 2rem;
        height: 2rem;*/
        width: calc(var(--tm-font-size-base) * 2);
        min-width: calc(var(--tm-font-size-base) * 2);
        height: calc(var(--tm-font-size-base) * 2);
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: var(--tm-font-size-body);
    }

    .tm-destination-node__spacer {
       /*width: 2rem;
        min-width: 2rem;
        height: 2rem;*/
        width: calc(var(--tm-font-size-base) * 2);
        min-width: calc(var(--tm-font-size-base) * 2);
        height: calc(var(--tm-font-size-base) * 2);
    }

    .tm-destination-node__children {
        margin-left: var(--tm-space-4);
        padding-left: var(--tm-space-2);
        border-left: 1px solid var(--tm-color-border);
    }

    .tm-destination-node__children.tm-hidden {
        display: none;
    }

    .tm-destination-node__label {
        display: flex;
        align-items: center;
        gap: var(--tm-space-2);
        width: 100%;
        cursor: pointer;
        /*min-height: 2.75rem;*/
        min-height: calc(var(--tm-font-size-base) * 2.75);
    }

    .tm-destination-node__text {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--tm-space-2);
        align-items: center;
    }

    .tm-destination-node__meta {
        color: var(--tm-color-muted);
        font-size: var(--tm-font-size-label);
    }

    .tm-destination-picker__popular {
        padding: var(--tm-space-3);
    }

    .tm-destination-picker__popular-title,
    .tm-destination-picker__tree-title {
        margin-bottom: var(--tm-space-2);
        font-weight: var(--tm-font-weight-600);
        color: var(--tm-color-text-brand-dark);
    }

    .tm-destination-picker__popular-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .tm-dropdown__mobile-header,
    .tm-destination-picker__mobile-header {
        display: none;
    }

    .tm-dropdown__close,
    .tm-destination-picker__close {
        border: 0;
        background: transparent;
        cursor: pointer;
        font: inherit;
        padding: var(--tm-space-2);
    }

    .tm-dropdown__close,
    .tm-destination-picker__close {
       /*text-decoration: underline;*/
    }

    .tm-form__conditional {
        margin-top: var(--tm-space-3);
        padding-left: var(--tm-space-4);
    }

    .tm-dropdown__save {
        display:none;
    }

    .tm-field__error {
        border: 1px solid var(--tm-color-alert-error-text);
    }

    @media (max-width: 768px) {
        .tm-dropdown__mobile-header,
        .tm-destination-picker__mobile-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-block: 0;
            padding-inline: var(--tm-space-3);
            background: var(--tm-color-surface);
        }

        .tm-dropdown__mobile-header {
            margin-top: calc(var(--tm-space-3) * -1);
        }

        .tm-dropdown__save {
            background: var(--tm-color-channel-charter);
            padding-block: var(--tm-space-3);
            border-radius: var(--tm-radius-1);
            border: 1px solid var(--tm-color-channel-charter);
            width: calc(100% - var(--tm-space-3) - var(--tm-space-3));
            color: #fff;
            font-size: var(--tm-font-size-200);
            font-weight: var(--tm-font-weight-600);
            position: fixed;
            bottom: var(--tm-space-3);
            left: var(--tm-space-3);
            display:block;
        }
    }

    @media (max-width: 768px) {
        .tm-destination-tree {
            /*max-height: none;*/
            flex: 1 1 auto;
        }

        .tm-destination-node__row,
        .tm-destination-node__label {
            /*min-height: 3rem;*/
            min-height: calc(var(--tm-font-size-base) * 3);
        }
    }    

    .tm-destination-picker__search {
        width: calc(100% - var(--tm-space-2) - var(--tm-space-2));
        margin-block: var(--tm-space-2);
        margin-inline: var(--tm-space-2);

    }

    .tm-destination-picker__search input {
        border-color: var(--tm-color-channel-charter);
    }

    .tm-destination-picker__search input:focus-visible {
        outline: 1px solid var(--tm-color-channel-charter);
        outline-offset: 0px;
    }
}