/* ==========================================================================
   Variables
   ========================================================================== */

.ts-app-topbar {
    --accent-color: initial;
    --accent-foreground-color: initial;
}

/* ==========================================================================
   Base
   ========================================================================== */

.ts-app-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 0.5rem 1rem;
    background: var(--accent-color, var(--ts-light-gray-900));
    color: var(--accent-foreground-color, white);
    min-height: 50px;
    align-items: center;
    gap: 0.5rem;
}

.ts-app-topbar :is(.start, .end, .center) > .item {
    border-radius: 100em;
    text-decoration: none;
    width: 38px;
    height: 38px;
    display: flex;
    font-size: var(--ts-font-size-17px);
    align-items: center;
    justify-content: center;
    margin-top: -0.1rem;
    margin-bottom: -0.1rem;
}

.ts-app-topbar :is(.start, .end, .center) .item.is-text {
    font-size: var(--ts-font-size-16px);
    font-weight: 500;
    width: auto;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0;
    margin: 0;
    display: block;
}

.ts-app-topbar :is(.start, .end) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ts-app-topbar .start {
    justify-content: flex-start;
    grid-column: 1 / 2;
}

.ts-app-topbar .start > .item:not(.is-text):first-child {
    margin-left: -0.75rem;
}

.ts-app-topbar .center {
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 2 / 3;
}

.ts-app-topbar .end {
    justify-content: flex-end;
    grid-column: 3 / 3;
}

.ts-app-topbar .end > .item:not(.is-text):last-child {
    margin-right: -0.75rem;
}

.ts-app-topbar .content {
    grid-column: 1 / 4;
}

/* ==========================================================================
   Variations
   ========================================================================== */
