// button.scss -- Button styles
//
// Copyright (C) 2016 Michael Seibt
//
// With contributions from: -
//
// This software may be modified and distributed under the terms
// of the MIT license. See the LICENSE file for details.

/**
 * Generic button styles for a subtile button on light background and a more present button
 * for darker / colorful backgrounds. Comes in two sizes: default (no BEM modifier) and a
 * larger version (with .SG-button--large modifier).
 *
 * @atom Button
 * @section Buttons
 * @modifiers
 *  .SG-button--large un bouton sur toute la largeur
 * @markup
 *  <button class="SG-button">.SG-button</button>
 *  <button class="SG-button SG-button--large">.SG-button</button>
 */

.SG-button {
    position: sticky;
    color: $color--identity-gray;
    background: none;
    border: 1px solid $color--identity-gray;
    border-radius: 5px;
    padding: 10px 14px;
    display: inline-block;
    cursor: pointer;
    outline: none;
    text-decoration: none;

    &:hover {
        border-color: $color--secondary-yellow;
        color: $color--secondary-yellow;
    }

    &--large {
        font-size: 16px;
        padding: 16px 36px;
    }
}