.button {
display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; color: #555; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; &:hover, &:focus, &:active { color: #333; border-color: #888; outline: 0; } &--primary { color: $white; background-color: $primary-color; border-color: $primary-color; font-weight: 800; border: 0; &:hover, &:focus, &:active { color: $white; background-color: $primary-color-dark; border: 0; } } &--flat { color: $primary-color; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 12px; padding-left: 10px; padding-right: 10px; position: relative; border: 0; &:hover, &:focus, &:active { border: 0; color: $primary-color; background: fade-out($primary-color, 0.8); } &.button--left { left: -10px; } &.button--right { right: -10px; } &.button--bottom { bottom: -10px; } } &--white { color: $primary-color; border: 0; background: $white; &:hover, &:focus, &:active { background: rgba($white, 0.8); border: 0; color: $primary-color; } } &--left { align-self: flex-start; } &--right { align-self: flex-end; margin-left: auto; } &--bottom { margin-top: auto; margin-bottom: 0; } &--center { align-self: center; }
}