src/components/buttons/SideBarChatButton/SideBarChatButton.module.css

@import "../../_variables.css";

.chatButton {
    width: 90%;
    margin: var(--spacing-sm);
    max-height: 3em;
    height: 3em;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--focus-color);
    background-color: transparent;
    transition: all var(--transition-speed-default) var(--bezier-custom);
}

.chatButton:hover {
    background-color: var(--focus-color);
    border: 1px solid var(--border-color-default);
    border-color: var(--focus-color);
    transform: translateY(-2px);
}

.chatButton:active {
    background-color: var(--color-primary-hover);
    transform: translateY(0px);
}