.btn,
button,
input[type=button],
input[type=submit],
input[type=reset] {
    -webkit-appearance: none;align-items: center;
    background-color: blueviolet;
    border: 0 solid blueviolet;
    border-radius: 8px;
    --color: blueviolet;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    line-height: 1;
    min-width: 5em;
    outline: none;
    overflow: hidden;
    padding: 1em 1.25em;
    position: relative;
    text-align: center;
    transition: box-shadow .25s;
    white-space: nowrap;
    vertical-align: middle;
}

/**
    Button Sizes (Text & Icon)
 */
.btn.small,
.icon-small:before,
.icon-small:after {
    font-size: .75rem;
}

.btn.medium,
.icon-medium:before,
.icon-medium:after {
    font-size: .875rem;
}

.btn.large,
.icon-large:before,
.icon-large:after {
    font-size: 1.5rem;
}

.btn.huge,
.icon-huge:before,
.icon-huge:after {
    font-size: 2rem;
}

.btn.full {
    display: flex;
    margin: 1em auto;
    width: 100%;
}

.btn.full-left {
    justify-content: flex-start;
}

.btn.full-right {
    justify-content: flex-end;
}

/**
    Button Color
 */
.btn.go,
.btn.primary {
    background-color: green;
    border-color: green;
    --color: green;
    color: white;
}

.btn.stop,
.btn.danger {
    background-color: red;
    border-color: red;
    --color: red;
    color: white;
}

.btn.yield,
.btn.important {
    background-color: orange;
    border-color: orange;
    --color: orange;
    color: white;
}

.btn.info {
    background-color: dodgerblue;
    border-color: dodgerblue;
    --color: dodgerblue;
    color: white;
}

.btn.secondary {
    background-color: #999;
    border-color: #999;
    --color: #999;
    color: white;
}

.btn.white {
    background: white;
    color: #333;
    --color: #333;
}

/**
Button Style
*/
.btn.disabled {
    cursor: not-allowed;
    opacity: .5;
}

.btn.line {
    background-color: transparent;
    border-width: 1px;
    color: var(--color);
}

.btn.raised {
    box-shadow: 0 .125em .125em var(--color);
}

.btn.bubble {
    box-shadow: 0 .5em 1em rgba(190, 190, 190, .5);
}

.btn.icon-only {
    padding: 1em;
}

.btn.round {
    border-radius: 24px;
    min-width: 3em;
    min-height: 3em;
}

.btn.round.large {
    border-radius: 36px;
}

.btn.round.huge {
    border-radius: 48px;
}

/**
    Button Hover
 */
[href].btn:hover {
    text-decoration: none;
}

.btn:hover,
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    box-shadow: 0 0 2em rgba(120, 120, 120, .3) inset;
}

.btn.raised:hover,
button.raised:hover,
input[type=button].raised:hover,
input[type=submit].raised:hover,
input[type=reset].raised:hover {
    box-shadow: 0 .125em .125em transparent;
}

.btn.disabled:hover,
button.disabled:hover,
input[type=button].disabled:hover,
input[type=submit].disabled:hover,
input[type=reset].disabled:hover,
.btn.line:hover,
button.line:hover,
input[type=button].line:hover,
input[type=submit].line:hover,
input[type=reset].line:hover {
    box-shadow: none;
}

.btn.bubble:hover,
button.bubble:hover,
input[type=button].bubble:hover,
input[type=submit].bubble:hover,
input[type=reset].bubble:hover {
    box-shadow: 0 .25em .25em rgba(190, 190, 190, .25);
}

/**
    Icons
 */
.icon.icon-above:before,
.icon.icon-left:before,
.icon.icon-below:after,
.icon.icon-right:after {
    content: attr(data-icon);
}

/**
    Button Icon - Positioning
 */
.btn.icon.icon-above,
.btn.icon.icon-below {
    flex-flow: column;
}

.icon.icon-only:not(.round) {
    min-width: auto;
}

.icon.icon-left:before {
    padding-right: .5rem;
    vertical-align: bottom;
}

.icon.icon-above:before {
    padding-bottom: .5rem;
}

.icon.icon-below:after {
    padding-top: .5rem;
}

.icon.icon-right:after {
    padding-left: .5rem;
    vertical-align: bottom;
}

/**
    Icon Style
 */
.icon.icon-only,
.icon:before,
.icon:after {
    font-family: "Material Icons", sans-serif;
}

.icon.icon-outlined.icon-only,
.icon.icon-outlined:before,
.icon.icon-outlined:after {
    font-family: "Material Icons Outlined", sans-serif;
}

.icon.icon-two-tone.icon-only,
.icon.icon-two-tone:before,
.icon.icon-two-tone:after {
    font-family: "Material Icons Two Tone", sans-serif;
}

.icon.icon-round.icon-only,
.icon.icon-round:before,
.icon.icon-round:after {
    font-family: "Material Icons Round", sans-serif;
}

.icon.icon-sharp.icon-only,
.icon.icon-sharp:before,
.icon.icon-sharp:after {
    font-family: "Material Icons Sharp", sans-serif;
}