/* =========================================================
|--------------------------------------------------------------------------
| ARQUIVO:
| /app/assets/css/layout/topbar.css
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
========================================================= */

.topbar
{
    width: 100%;

    min-height: 46px;

    background:
    linear-gradient(
        90deg,
        #020617 0%,
        #0f172a 100%
    );

    border-bottom:
    1px solid rgba(255,255,255,.05);

    overflow: hidden;

    z-index: 1000;
}

/* =========================================================
TOPBAR CONTAINER
========================================================= */

.topbar-container
{
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;
}

/* =========================================================
WRAPPER
========================================================= */

.topbar-wrapper
{
    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;
}


/* =========================================================
SECTIONS
========================================================= */

.topbar-left,
.topbar-center,
.topbar-right
{
    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    white-space: nowrap;
}


/* =========================================================
LEFT
========================================================= */

.topbar-left
{
    flex: 1;

    justify-content: flex-start;

    overflow: hidden;
}


/* =========================================================
CENTER
========================================================= */

.topbar-center
{
    justify-content: center;

    padding:
    0 20px;

    overflow: hidden;
}


/* =========================================================
RIGHT
========================================================= */

.topbar-right
{
    flex: 1;

    justify-content: flex-end;
}


/* =========================================================
ITEM
========================================================= */

.topbar-item
{
    display: inline-flex;

    align-items: center;

    white-space: nowrap;

    color: rgba(255,255,255,.75);

    font-size: 13px;

    transition: .3s ease;
}


/* =========================================================
SPACING
========================================================= */

.topbar-left .topbar-item
{
    margin-right: 22px;
}

.topbar-left .topbar-item:last-child
{
    margin-right: 0;
}


/* =========================================================
ICON
========================================================= */

.topbar-item i
{
    color: #2563eb;

    font-size: 12px;

    margin-right: 8px;
}


/* =========================================================
HOVER
========================================================= */

.topbar-item:hover
{
    color: #ffffff;
}


/* =========================================================
SOCIAL
========================================================= */

.topbar-social
{
    display: flex;

    align-items: center;

    white-space: nowrap;
}


/* =========================================================
SOCIAL LINK
========================================================= */

.social-link
{
    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 10px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.05);

    color: rgba(255,255,255,.75);

    transition: .3s ease;
}

.social-link:first-child
{
    margin-left: 0;
}


/* =========================================================
HOVER
========================================================= */

.social-link:hover
{
    background: #2563eb;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
WHATSAPP
========================================================= */

.social-link.whatsapp:hover
{
    background: #16a34a;
}


/* =========================================================
RESPONSIVE
|--------------------------------------------------------------------------
| Quando faltar espaço:
| - esconde textos
| - mantém apenas ícones
|--------------------------------------------------------------------------
========================================================= */

@media(max-width: 1100px)
{
    .topbar-item span
    {
        display: none;
    }

    .topbar-item i
    {
        margin-right: 0;
    }

    .topbar-left .topbar-item
    {
        margin-right: 14px;
    }
}


/* =========================================================
TABLET
========================================================= */

@media(max-width: 768px)
{
    .topbar
    {
        min-height: 42px;
    }

    .topbar-wrapper
    {
        min-height: 42px;
    }

    .topbar-center
    {
        display: none;
    }

    .social-link
    {
        width: 28px;

        height: 28px;

        margin-left: 8px;
    }

    .topbar-item i
    {
        font-size: 11px;
    }
}


/* =========================================================
MOBILE
========================================================= */

@media(max-width: 480px)
{
    .topbar-left .topbar-item
    {
        margin-right: 10px;
    }

    .social-link
    {
        width: 26px;

        height: 26px;
    }
}