@layer dialogs {
    dialog[data-id="url-dialog"] {
        label {
            font-size: 1em;
        }

        .input-wrapper {
            position: relative;

            input {
                padding-right: 50px;
                text-overflow: ellipsis;
            }

            .toolbar {
                display: flex;
                gap: 2px;
                position: absolute;
                top: 10px;
                right: 6px;

                span {
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                    position: relative;
                    display: grid;
                    place-content: center;

                    svg {
                        width: 100%;
                        height: 100%;
                        pointer-events: none;
                    }

                    &:active {
                        top: 2px;
                    }
                }
            }
        }
    }

    :root[data-theme="light"] {
        dialog[data-id="url-dialog"] {
            .input-wrapper {
                box-shadow: inset 0px 1px 1px rgba(0,0,0,0.05); 
                background-color: var(--light-input-bg-color);   
            }   
        }    
    }

    :root[data-theme="dark"] {
        dialog[data-id="url-dialog"] {
            .input-wrapper {
                background-color: var(--dark-input-bg-color);   
            }   
        }    
    }
}