/* Keep the three path values readable beside the live file status at phone width. */
@media (width <= 480px) {
    #breadcrumb-bar {
        column-gap: var(--space-1);
        padding-inline: var(--space-2);
    }

    #breadcrumb-bar .breadcrumb-path {
        gap: var(--space-1);
    }

    #breadcrumb-bar .breadcrumb-path .bc-sep {
        display: none;
    }

    #breadcrumb-bar .breadcrumb-path .bc-segment:first-child {
        flex: 0 0 60px;
    }

    #breadcrumb-bar .breadcrumb-path .bc-segment:nth-child(3) {
        flex: 1 1 72px;
        min-width: 72px;
        overflow: hidden;
    }

    #breadcrumb-bar .breadcrumb-path .bc-segment:last-of-type {
        flex: 1 1 110px;
        min-width: 82px;
    }

    #breadcrumb-bar .breadcrumb-path .bc-value {
        font-size: var(--font-size-xs);
    }

    #breadcrumb-bar > .fish-file-status:not([hidden]) {
        display: inline-flex;
        flex: 0 0 22px;
        align-items: center;
        justify-content: center;
        width: 22px;
        max-width: 22px;
        margin-left: 0;
        font-size: 0;
    }

    #breadcrumb-bar > .fish-file-status:not([hidden])::before {
        display: block;
        width: 18px;
        height: 18px;
        background: currentColor;
        content: '';
        mask: url('../icons/status-checking.svg') center / contain no-repeat;
    }

    #breadcrumb-bar > .fish-file-status[data-state='free']::before {
        mask-image: url('../icons/status-free.svg');
    }

    #breadcrumb-bar > .fish-file-status[data-state='locked']::before {
        mask-image: url('../icons/status-locked.svg');
    }

    #breadcrumb-bar > .fish-file-status[data-state='offline']::before {
        mask-image: url('../icons/status-offline.svg');
    }

    #breadcrumb-bar > .fish-file-status[data-state='unknown']::before {
        mask-image: url('../icons/status-unknown.svg');
    }

    #breadcrumb-bar > .fish-file-status:focus-visible {
        border-radius: var(--radius-sm);
        outline: 1px solid var(--border-hover);
    }
}