/*==================================================
  COSVIN FRAMEWORK
  TOPBAR
  Version: 2.0.0
==================================================*/

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

.cosvin-topbar{

    position:relative;

    height:42px;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary)
    );

    color:#000;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:10;

}

/*==================================
CONTENEDOR
==================================*/

.topbar-container{

    width:100%;

    max-width:var(--container);

    margin:0 auto;

    padding:0 24px;

}

/*==================================
SLIDER
==================================*/

.topbar-slider{

    position:relative;

    width:100%;

    height:42px;

}

/*==================================
MENSAJES
==================================*/

.topbar-slide{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.2px;

    opacity:0;

    transform:translateY(12px);

    transition:
        opacity .45s ease,
        transform .45s ease;

    pointer-events:none;

}

.topbar-slide.active{

    opacity:1;

    transform:translateY(0);

}

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

.cosvin-topbar:hover{

    filter:brightness(1.02);

}

@media (prefers-reduced-motion: reduce){

    .topbar-slide{

        transition:none;

    }

}

@media(max-width:600px){

    .cosvin-topbar,
    .topbar-slider{

        height:30px;

    }

    .topbar-container{

        padding:0 10px;

    }

    .topbar-slide{

        font-size:.72rem;

        line-height:1.15;

        text-align:center;

    }

}