@import "variables";

@mixin phone($property, $value) {
    @media only screen and (max-width: 600px) {
        #{$property}: $value;
    }
}

@mixin scroll-style($color: $chatfaq-color-scrollBar-dark) {
    scrollbar-color: $color transparent;
    scrollbar-width: thin;

    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px 6px transparent;
        border: solid 2px transparent;
    }
    &::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px 6px $color;
        border: solid 2px transparent;
    }
    &::-webkit-scrollbar-thumb:hover {
        box-shadow: inset 0 0 6px 6px $color;;
        border: solid 1px transparent;
    }
}

@mixin button-round {
    padding: 0px 20px 0px 20px;
    min-width: 120px;
    border-radius: 24px !important;
    text-transform: uppercase !important;
    border-color: $chatfaq-color-primary-500;
    color: $chatfaq-color-primary-500;
    background-color: #eae7f2;
    cursor: pointer;
    &:hover {
        background-color: rgba(#1A0438, .2);
        color: $chatfaq-color-primary-900;
        border-color: $chatfaq-color-primary-900;
    }
    &:active {
        background-color: rgba(#1A0438, .4);
    }
    &:disabled {
        color: #8E959F;
        background-color: rgba(223, 218, 234, 0.4);
        border-color: #8E959F;
    }
}


@mixin button-primary {
    padding: 8px 16px 8px 16px;
    min-width: 120px;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    border: none !important;
    color: white;
    background-color: $chatfaq-color-primary-500;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;

    &:hover {
        background-color: $chatfaq-color-primary-900;
    }
    &:active {
        background-color: $chatfaq-color-primary-500;
    }
    &:disabled {
        background-color: #8E959F;
    }
}
