@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@600&family=Roboto:wght@100;300;400;500;700&display=swap')

.music-widget
    width: 197px
    height: 45px
    background: linear-gradient(270deg, #0B0C10 0%, #23232F 100%)

.song-info
    &.playing
        .author
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)
            background-clip: text
            -webkit-background-clip: text
            -webkit-text-fill-color: transparent
    .author
        color: #424354
        font-family: Microgramma D Extended
        font-size: 12px
        font-style: normal
        font-weight: 700
        line-height: normal
    .title
        color: #424354
        font-family: Microgramma D Extended
        font-size: 8px
        font-style: normal
        font-weight: 700
        line-height: normal

.discount-percentage-widget
    width: 90px
    height: 45px
    background: linear-gradient(270deg, #0B0C10 0%, #23232F 100%)

    .widget-image
        img
            width: 100%
            height: 100%
            max-width: 20px
            max-height: 26px
    .content
        color: #D4505D
        font-family: SF PRO DISPLAY
        font-size: 17pxw
        font-style: normal
        font-weight: 400
        line-height: normal
    .discount
        color: #D4505D
        font-family: HighriseBold
        font-size: 35px
        font-style: normal
        font-weight: 400
        line-height: normal

.amount-bank-account-widget
    min-width: 120px
    height: 45px
    background: linear-gradient(270deg, #0B0C10 0%, #23232F 100%)

    .amount
        color: #91F5AF
        font-family: SF PRO DISPLAY
        font-style: normal
        font-size: 24px
        font-weight: bold
        line-height: normal
    .i
        color: #91F5AF
        font-family: Antonio
        font-size: 22px
        font-style: normal
        font-weight: 600
        line-height: normal

.current-car-info
    width: 423px
    height: 181px
    position: relative
    top: 8px
    background: linear-gradient(79deg,#0B0C10 0%, #23232F 99%)
    .title
        .logo
            width: 64px
            height: 64px
        .name
            color: #FFF
            font-family: Microgramma D Extended
            font-size: 19.053px
            font-style: normal
            font-weight: 700
            line-height: normal
            letter-spacing: 0.762px
            text-transform: uppercase
        .category
            color: #FFF
            font-family: Microgramma D Extended
            font-size: 12px
            font-style: normal
            font-weight: 700
            line-height: normal
            letter-spacing: 0.48px
            text-transform: uppercase
.stats-page
    width: 423px
    height: 430px
    position: relative
    .tier
        color: #FFF
        font-family: SF Pro Display
        font-size: 13px
        font-style: normal
        font-weight: normal
        line-height: normal
        letter-spacing: 0.52px
        text-transform: uppercase
    .category-info
        .category
            background: #FFF
            color: #000
            font-family: Microgramma D Extended
            font-size: 23.398px
            font-style: normal
            font-weight: 700
            line-height: normal
            text-align: center
            text-transform: uppercase
    .handling-info
        color: #FFF
        font-family: SF Pro Display
        font-size: 13px
        font-style: normal
        font-weight: 800
        line-height: normal
        letter-spacing: 0.52px
        .drift
            color: #FFF
            font-family: SF Pro Display
            font-size: 13px
            font-style: normal
            font-weight: 500
            letter-spacing: 1px
            opacity: 0.75
        .grip
            color: #FF7A00
            font-family: SF Pro Display
            font-size: 13px
            font-style: normal
            font-weight: 800
            line-height: normal
            letter-spacing: 0.52px
    .wall
        margin: auto
        width: 2px
        height: 10px
        border-radius: 18px
        background: #FFF
    .slider
        height: 4px
        border-radius: 22px
        background: rgba(217, 217, 217, 0.50)
        margin: 6px 0
        padding-right: 18px
        position: relative
        .ball
            width: 18px
            height: 18px
            background: #FFF
            border-radius: 1rem
            position: absolute
            bottom: -7px
    .traction-info
        color: #FFF
        font-family: SF Pro Display
        font-size: 13px
        font-style: normal
        font-weight: 800
        line-height: normal
        letter-spacing: 0.52px
    .idk
        .flex
            div
                width: 96px
                height: 5px
                opacity: 0.5
                background: #FFF
                &.active
                    height: 11px
                    opacity: 1
    .speed-info
        .text
            color: #FFF
            font-family: SF Pro Display
            font-size: 19.053px
            font-style: normal
            font-weight: 800
            line-height: normal
            letter-spacing: 0.762px
            span
                color: #FFF
                font-family: SF Pro Display
                font-size: 11px
                font-style: normal
                font-weight: 600
                line-height: normal
                letter-spacing: 0.44px
                opacity: 0.75
        .content
            width: 89px
            height: 37px
            background: #FFF
            color: #000
            font-family: SF Pro Display
            font-size: 19.053px
            font-style: normal
            font-weight: bold
            line-height: normal
            letter-spacing: 0.762px
.bottom
    width: 423px
    height: 47px
    background: linear-gradient(79deg, #14151A 0%, #23232F 100%)
    .info-text
        color: #FFF
        font-family: Microgramma D Extended
        font-size: 13px
        font-style: normal
        font-weight: 700
        line-height: normal
        letter-spacing: 0.6px
        text-transform: uppercase

.custom-layout-color
    .rcp
        width: 100%
        border-radius: 0
        .rcp-body
            background: #060606
        .rcp-saturation
            border-radius: 0
            .rcp-saturation-cursor
                width: 16px
                height: 16px
    .ready-colors
        background: #060606
        .boxes
            flex-wrap: wrap
            .box
                width: 24px
                height: 24px
                background: #0B0B0B

button.test-drive
    width: 151px
    height: 47px
    .text
        color: #1B1C24
        font-family: SF Pro Display
        font-size: 16px
        font-style: normal
        font-weight: 800
        line-height: normal
        letter-spacing: 0.52px
button.compare
    height: 47px

.svg_cursor
    width: 16px
    height: 16px
.svg_compare_transparent
    width: 25px
    height: 31px

.ribbon
    filter: drop-shadow(2px 3px 2px rgba(black, 0.5))
    .pow
        $default-color: #FFD363
        $default-width: 32px
        $default-height: 44px

        filter: drop-shadow(2px 3px 2px rgba(black, 0.5))
        > .content
            transition: color 0.2s, min-height 0.2s
            color: #3A3A3A
            font-size: 1.25rem
            text-align: center
            font-weight: 400
            background: var(--color, $default-color) linear-gradient(45deg, rgba(black, 0) 0%, rgba(white, 0.25) 100%)
            padding: 8px 2px 4px
            width: var(--width, $default-width)
            min-height: var(--height, $default-height)
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px))
            &:hover
                color: black
                min-height: var(--height, $default-height + 8px)
