// COLORS
$primary-red: #DD5555;
$secondary-red: #FB6362;

$primary-blue: #414A59;
$secondary-blue: #20B8c5;

$primary-yellow: #E5D151;
$light-yellow: #fff19c;
$very-light-yellow: #ffffe0;

$primary-green: #82CA9C;

$very-light-grey: #F7F7F7;
$light-grey: #EEEEEE;
$grey: #E7E7E7;
$medium-grey: #D9D9D9;
$dark-grey: #8D8D8D;

$primary-black: #4D4D4D;

// SPACING
$full-space: 40px;
$half-space: 20px;

// FONT SIZING
$font-size--xs: 11px;
$font-size--sm: 13px;
$font-size--md: 16px;
$font-size--bg: 19px;
$font-size--lg: 24px;
$font-size--xl: 32px;

@mixin scrollbars() {
    $size: .4em;
    $color: $grey;

    &::-webkit-scrollbar {
        width:  $size;
        height: $size;
    }

    &::-webkit-scrollbar-thumb {
        background: transparent;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &:hover {
        &::-webkit-scrollbar {
            width:  $size;
            height: $size;
        }

        &::-webkit-scrollbar-thumb {
            background: $color;
        }

        &::-webkit-scrollbar-track {
            background: lighten($color, 50%);
        }
    }
}
