$size: 64px;
$padding: 4px;

.container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    white-space: nowrap;

    overflow: hidden;

    width: 100%;
}

.inNavActionsContainer {
    display: inline-flex;
    align-items: center;

    overflow-x: auto;
    overflow-x: overlay;

    &[aria-hidden="true"] {
        visibility: hidden;
    }

    .actions {
        white-space: nowrap;
    }
}

.belowNavActionsContainer {
    padding: 0 10px 4px 10px;
}

.name {
    padding: 4px;

    border: 0;
    background: transparent;
    outline: none !important;

    color: var(--g2000);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 320px;

    text-align: center;

    cursor: text;
    user-select: text;

    &[contenteditable] {
        text-overflow: initial;
    }

    &.editable:hover,
    &[contenteditable] {
        background: var(--g200);
    }
}

nav.breadcrumbs {
    padding: 0 $padding;

    display: inline-flex;
    align-items: center;
}

.actions {
    list-style: none;

    font-size: 12px;

    align-self: center;

    @media (width <= 700px) {
        display: block;
    }

    > li {
        display: inline-block;

        button,
        a {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;

            cursor: pointer;

            color: var(--g1900);
            background: none;
            border: 0;

            svg {
                width: 1em;
                color: var(--g1200);
            }

            &[disabled] {
                color: var(--g700);
                cursor: default;

                svg {
                    color: inherit;
                }
            }

            &:not([disabled]):hover {
                border-radius: 4px;
                color: var(--g2000);
                background: var(--g400);
            }
        }
    }
}

.iconNamePair {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lastEditTime {
    color: var(--g1200);

    padding: 0 8px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 12px;
    font-weight: 300;
}

.owner {
    line-height: 20px;
    padding: 4px 0;

    position: relative;

    .ownerAvatar {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    &::before {
        content: "";
        display: inline-block;
        width: 26px;
    }
}

// Hide owner name and breadcrumb separator, i.e. just show the owner avatar
@media (width <= 800px) {
    .breadcrumbs li::before {
        visibility: hidden;
        margin: 0 !important;
    }

    .ownerName {
        display: none;
    }

    .owner::before {
        width: 20px;
    }
}
