.mobile-settings-panel.hidden {
    display: none !important;
}

.mobile-settings-panel:not(.hidden) {
    display: block !important;
}


.mobile-contextual-tools {
    display: none;
    align-items: center;
    gap: 2px;
}

.mobile-contextual-tools::before {
    content: '';
    display: block;
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 6px;
}

body.contextual-sidebar-open .mobile-contextual-tools {
    display: flex;
}

@media (min-width: 1024px) {
    .mobile-contextual-tools {
        display: none !important;
    }
}


#mobileContextualExtension {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
}

#mobileContextualExtension > *:last-child {
    margin-right: 0;
}


#mobileContextualExtension .icon-btn.text-tool {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}


#mobileContextualExtension .text-size-chip.mobile-text-size-chip,
#mobileContextualExtension .mobile-text-size-chip {
    height: 26px;
    padding: 0 3px;
    gap: 2px;
    border-radius: 6px;
    min-width: 0;
}

#mobileContextualExtension .mobile-text-size-btn,
#mobileContextualExtension .text-size-chip.mobile-text-size-chip .icon-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 5px;
}

#mobileContextualExtension .mobile-text-size-value,
#mobileContextualExtension .text-size-chip__value.mobile-text-size-value {
    font-size: 11px;
    min-width: 16px;
}


#mobileContextualExtension #mobileShapeColorWrap .contextual-toolbar__shape-color-pill {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobileContextualExtension #mobileShapeColorWrap .color-pill__swatch {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    margin: 0;
}

#mobileContextualExtension #mobileShapeColorWrap .contextual-toolbar__shape-color-value {
    display: none;
}


@media (max-width: 459px) {

    
    .mobile-main-toolrow {
        padding: 0.5rem 0.625rem !important;
        gap: 0.375rem !important;
    }

    .mobile-main-toolrow .icon-btn {
        width: 36px !important;
        height: 36px !important;
    }

    
    .mobile-main-toolrow > .w-px {
        height: 1.5rem;
        margin-left: 0.125rem;
        margin-right: 0.125rem;
    }

    
    #mobileContextualExtension {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        gap: 0.125rem !important;
    }

    #mobileContextualExtension .icon-btn.text-tool {
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px;
    }

    
    #mobileContextualExtension #mobileTextSizeTrigger,
    #mobileContextualExtension #mobileStrokeDropdownTrigger {
        width: 34px !important;
        height: 34px !important;
    }

    
    #mobileContextualExtension .icon-btn:not(.text-tool):not(#mobileTextSizeTrigger):not(#mobileStrokeDropdownTrigger) {
        width: 28px !important;
        height: 28px !important;
    }

    
    #mobileColorSwatchWrap .relative {
        width: 28px !important;
        height: 28px !important;
    }

    #mobileColorSwatchWrap #mobileColorSwatch {
        width: 1rem;
        height: 1rem;
    }

    
    #mobileContextualExtension .w-px {
        height: 1.25rem;
    }

    
    #mobileContextualExtension .flex.items-center.gap-1 {
        gap: 0.125rem;
    }

    
    #mobileContextualExtension #mobileShapeColorWrap .contextual-toolbar__shape-color-pill {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        border-radius: 8px;
    }

    #mobileContextualExtension #mobileShapeColorWrap .color-pill__swatch {
        border-radius: 6px;
    }
}


@media (max-width: 389px) {

    
    .mobile-main-toolrow {
        padding: 0.5rem 0.5rem !important;
        gap: 0.25rem !important;
    }

    .mobile-main-toolrow .icon-btn {
        width: 34px !important;
        height: 34px !important;
    }

    
    #mobileContextualExtension .icon-btn.text-tool {
        width: 26px !important;
        height: 26px !important;
        border-radius: 5px;
    }

    #mobileContextualExtension #mobileTextSizeTrigger,
    #mobileContextualExtension #mobileStrokeDropdownTrigger {
        width: 30px !important;
        height: 30px !important;
    }

    #mobileContextualExtension .icon-btn:not(.text-tool):not(#mobileTextSizeTrigger):not(#mobileStrokeDropdownTrigger) {
        width: 26px !important;
        height: 26px !important;
    }

    #mobileColorSwatchWrap .relative {
        width: 26px !important;
        height: 26px !important;
    }

    
    #mobileContextualExtension #mobileShapeColorWrap .contextual-toolbar__shape-color-pill {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
}


@media (max-width: 359px) {

    
    .mobile-main-toolrow {
        padding: 0.375rem 0.375rem !important;
        gap: 0.125rem !important;
    }

    .mobile-main-toolrow .icon-btn {
        width: 30px !important;
        height: 30px !important;
    }

    
    .mobile-main-toolrow .icon-btn i {
        font-size: 14px;
    }

    .mobile-main-toolrow > .w-px {
        height: 1.25rem;
    }

    
    #mobileContextualExtension .icon-btn.text-tool {
        width: 24px !important;
        height: 24px !important;
        border-radius: 4px;
    }

    #mobileContextualExtension #mobileTextSizeTrigger,
    #mobileContextualExtension #mobileStrokeDropdownTrigger {
        width: 28px !important;
        height: 28px !important;
    }

    #mobileContextualExtension .icon-btn:not(.text-tool):not(#mobileTextSizeTrigger):not(#mobileStrokeDropdownTrigger) {
        width: 24px !important;
        height: 24px !important;
    }

    #mobileColorSwatchWrap .relative {
        width: 24px !important;
        height: 24px !important;
    }

    #mobileColorSwatchWrap #mobileColorSwatch {
        width: 0.875rem;
        height: 0.875rem;
    }

    
    #mobileContextualExtension #mobileShapeColorWrap .contextual-toolbar__shape-color-pill {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        border-radius: 6px;
    }

    #mobileContextualExtension #mobileShapeColorWrap .color-pill__swatch {
        border-radius: 5px;
    }

    
    #mobileContextualExtension .mobile-text-size-value,
    #mobileContextualExtension .text-size-chip__value.mobile-text-size-value {
        font-size: 10px;
        min-width: 14px;
    }

    
    #mobileContextualExtension .mobile-text-size-btn,
    #mobileContextualExtension .text-size-chip.mobile-text-size-chip .icon-btn {
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 4px;
    }

    
    #mobileContextualExtension {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}