/*=========================================================
44 Web Design Framework
-----------------------------------------------------------
Project      : 433
Client       : Vehicle Safety Solutions Ltd

File         : buttons.css
Version      : 1.0.0

Author       : Ian Latus
Company      : 44 Web Design

Purpose
-------
Provides reusable button styles used throughout
the website.

Contents
--------
1. Primary Button
2. Hover State
3. Focus State

=========================================================*/


/*=========================================================
Dependencies

variables.css
base.css
typography.css

=========================================================*/


/*=========================================================
1. Primary Button
=========================================================*/

.button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: var(--space-xs);

	padding:
		var(--space-button-y)
		var(--space-button-x);

    background: var(--colour-primary);

    color: var(--colour-white);

    font-weight: 600;

    border: none;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition:
        background var(--transition-normal),
        transform var(--transition-fast);

}


/*=========================================================
2. Hover State
=========================================================*/

.button:hover {

    background: var(--colour-secondary);

    transform: translateY(-2px);

}


/*=========================================================
3. Focus State
=========================================================*/

.button:focus-visible {

    outline: 3px solid var(--colour-secondary);

    outline-offset: 3px;

}