.top-bar__content {
background-color: rgba(0, 0, 0, .1);
display: flex;
flex-direction: column;
gap: 10px
}
.top-bar__section-1-icon {
display: flex;
width: 24px
}
.top-bar__section-1-icon > svg {
width: 100%
}
.top-bar__section-1-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.top-bar__section-1 {
display: flex;
flex-direction: column;
gap: 32px;
padding-top: 28px
}
.top-bar {
font-family: Montserrat
}
.top-bar__section-1-name {
font-size: 14px;
color: #252525
}
.top-bar__section-1-value {
font-weight: 400;
font-size: 14px;
color: #252525;
opacity: .5
}
.top-bar__section-2-networks {
display: flex;
gap: 10px
}
.top-bar__section-2-network {
display: flex;
width: max-content
}
.top-bar__section-2-network > svg {
width: auto;
height: 15px
}
.top-bar__section-2 {
display: flex;
width: 100%;
flex-direction: column;
align-items: center
}
.top-bar__section-2-button {
display: flex;
background-color: #219df3;
padding: 18px 24px;
color: #fff;
font-size: 13px;
font-weight: 500;
margin-top: 12px;
justify-content: center;
width: 75%;
align-items: center;
text-align: center
}
.top-bar__section-2-network:hover path {
fill: #51acfb
}
.top-bar__section-1-icon {
width: 27px;
}
.top-bar__section-1-icon {
padding-top: 13px;
padding-bottom: 13px;
}
@media (min-width: 1200px) {
.top-bar {
width: 100%;
display: flex
}
.top-bar__content {
flex-direction: row;
width: 100%;
padding-left: 50px;
justify-content: space-between;
padding-right: 50px;
gap: 10px
}
.top-bar__content {
height: 48px;
}
.top-bar__section-1-name {
font-size: 13px;
}
.top-bar__section-1-value {
font-size: 13px;
}
.header__widget {
width: 100%
}
.top-bar__section-2 {
flex-direction: row;
gap: 10px;
width: max-content
}
.top-bar__section-1 {
flex-direction: row;
padding-top: 0;
width: max-content;
gap: 12px
}
.top-bar__section-2-button {
width: max-content;
margin-top: 0;
background-color: #51acfb
}
.top-bar__section-1-item {
flex-direction: row
}
.top-bar__section-1-icon {
width: 10px
}
.top-bar__section-2-network > svg path {
fill: rgba(37, 37, 37, .8)
}
.top-bar__section-2-network > svg {
height: 13px
}
.top-bar__section-1-icon {
padding-top: 0;
padding-bottom: 0;
}
}
.top-bar__section-2-button {
will-change: transform, box-shadow;
position: relative;
overflow: hidden
}
.top-bar__section-2-button:before {
content: '';
position: absolute;
left: -80%;
top: 0;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .56) 50%, rgba(255, 255, 255, 0) 100%);
width: 80%;
opacity: .5;
transition: left .5s ease;
will-change: left;
transform: skewX(-30deg)
}
.top-bar__section-2-button:hover:before {
left: 100%
}
.top-bar__section-1-item:hover {
color: #51acfb;
}
.top-bar__section-1-item:hover .top-bar__section-1-name {
color: inherit;
}
.top-bar__section-1-item:hover .top-bar__section-1-value {
color: inherit;
}
.top-bar__section-1-item:hover path {
fill: #51acfb;
}
.top-bar__section-2-button {
height: 100%;
}