/*  --------------------------------------------------------------  */
/*  BLOCK   : btn                                                   */
/*  ELEMENTS:                                                       */
/*  MODS    : -small, -large, -wide, -narrow, -full                 */
/*  MODS    : -centre, -border, -subtle, -toRight                   */
/*  MODS    : -clear, -positive, -negative, -caution, -neutral      */
/*  VARS    : TODO                                                  */
/*  --------------------------------------------------------------  */
.b-btn {
    display: inline-block;
    box-sizing: border-box;

    /*
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
*/
    cursor: pointer;

    font-weight: bold;

    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    font-family: inherit;
    font-size: 100%;

    border: none;
    padding: 1rem 2rem;

    background-color: transparent;
    color: #222222;

    border: 1px solid transparent;
    border-color: #a5a5a5;
    border-color: var(--c-gray35, #a5a5a5);
    /*    background: var(--c-gray73, #444444);*/
    /*
    color: #ffffff;
    color: var(--c-white, #ffffff);
*/
    transition: background 0.2s ease, color 0.2s ease;
}
.b-btn .b-icon {
    margin-right: .5em;
    transition: transform 1s ease;
}
.b-btn:hover .b-icon {
/*    transform: rotate(1turn);*/
}
.b-btn:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
/*.b-btn.-clear { background-color: transparent; }*/
/*
.b-btn.-primary {
    background-color: 337ab7;
    background-color: var(--c-primary, 337ab7);
    border-color: #2e6da4;
    border-color: var(--c-primaryB, #2e6da4);
    color: #fff;
    color: var(--c-white, #fff);
}
.b-btn.-positive {
    background-color: #03804d;
    background-color: var(--c-positive, #03804d);
}
.b-btn.-positive.-subtle {
    background-color: #d4f3e6;
    background-color: var(--c-positiveSubtle, #d4f3e6);
}
.b-btn.-caution {
    background-color: #a59b15 ;
    background-color: var(--c-caution, #a59b15);
}
.b-btn.-caution.-subtle {
    background-color: #fffecf;
    background-color: var(--c-cautionSubtle, #fffecf);
}
.b-btn.-negative {
    background-color: #b12a0b;
    background-color: var(--c-negative, #b12a0b);
}
.b-btn.-negative.-subtle {
    background-color: #fdded8;
    background-color: var(--c-negativeSubtle, #d4f3e6);
}
.b-btn.-neutral {
    background-color: #0192d0;
    background-color: var(--c-neutral, #0192d0);
}
.b-btn.-neutral.-subtle {
    background-color: #d3f2ff;
    background-color: var(--c-neutralSubtle, #d3f2ff);
}
.b-btn.-disabled {
    color: #a5a5a5;
    color: var(--c-gray35, #a5a5a5);
}
*/
.b-btn.-toLeft {
    float: left;
}
.b-btn.-toRight {
    float: right;
}
.b-btn.-small {
    font-size: 100%;
    padding: .8rem 1.2rem;
}
.b-btn.-large {
    font-size: 100%;
    padding: 1.2rem 2.4rem;
}
.b-btn.-wide {
    font-size: 100%;
    padding: 1rem 3.4rem;
}
.b-btn.-narrow {
    font-size: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
.b-btn.-tiny {
    font-size: 100%;
    padding: .5rem;
}
.b-btn.-centre {
    display: block;
    margin: 0 auto;
}
.b-btn.-full {
    display: block;
    width: 100%;
}
.b-btn.-link {
    border: none;
}
/*
.b-btn:not(.-disabled):not(.-link):hover,
.b-btn:not(.-disabled):not(.-link):focus {
    background-color: #808080;
    background-color: var(--c-gray15, #808080);
    outline: 0;
}

.b-btn.-positive:not(.-disabled):hover {
    color: #222;
    color: var(--c-gray87, #222);

    background-color: #d4f3e6;
    background-color: var(--c-positiveSubtle, #d4f3e6);
}
*/
.b-btn.-link:active,
.b-btn.-link:hover,
.b-btn.-link:focus {
    /*    TODO color to variable*/
    color: #23527c;
    text-decoration: underline;
}
/*  ========================== END BLOCK =========================  */