.button { box-sizing: border-box; border-radius: 100px; background-color: rgba($color: $white, $alpha: 0); transition: all ease-in-out 0.1s; cursor: pointer; @keyframes move-light { from { transform: translateX(-40px) skewX(-45deg); opacity: 1; } to { transform: translateX(400px) skewX(-45deg); opacity: 0.8; } } &--lg { display: flex; align-items: center; gap: 24px; padding: 24px 58px 26px; border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 600; font-size: 22px; line-height: 140%; text-align: center; @include tablet { justify-content: center; gap: 20px; max-width: 480px; padding: 21px 30px; font-size: 18px; } &::before { transition: all ease-in-out 0.1s; } &--consult { &::before { content: ''; display: inline-block; height: 22px; width: 22px; background: url(../img/icons/consultation.svg) center no-repeat; } } &--coin { &::before { content: ''; display: inline-block; height: 22px; width: 22px; background: url(../img/icons/ruble.svg) center no-repeat; } } } &--light { position: relative; overflow: hidden; color: $black; background-color: $white; &:hover { color: $blue; &::after { animation: move-light 0.5s; } } &:active { color: $darkblue; } &::after { content: ''; position: absolute; top: 0; left: 0; width: 1.5em; height: 100%; background-color: rgba($color: $blue, $alpha: 0.5); transform: translateX(-4em) skewX(-45deg); } } &--dark { position: relative; overflow: hidden; color: $white; border-color: rgba($color: $white, $alpha: 0.3); background-color: $blue; &:hover { color: $blue; background-color: $white; border-color: $blue; &::after { animation: move-light 0.5s; } } &:active { color: $darkblue; border-color: $darkblue; } &::after { content: ''; position: absolute; top: 0; left: 0; width: 1.5em; height: 100%; background-color: rgba($color: $blue, $alpha: 0.5); transform: translateX(-4em) skewX(-45deg); } &::before { filter: brightness(10); } &:hover::before, &:active::before { filter: brightness(1); } } &--order { display: inline-block; padding: 14px 29px; color: $grey; font-weight: 500; font-size: 14px; letter-spacing: 0.01em; border: 1px solid $lightgrey; &:hover { color: $white; border-color: $blue; background-color: $blue; } &:active { border-color: $darkblue; background-color: $darkblue; } &--light { color: #dcdcdc; border-color: rgba($color: $white, $alpha: 1); } &--white { background-color: $white; border-color: $white; color: $darkgrey; &:hover { color: $white; border-color: $white; background-color: $blue; } &:active { border-color: $white; background-color: $darkblue; } } } &--prev, &--next { height: 60px; width: 60px; border: none; border-radius: 30px; background: url(../img/icons/prev.svg) center no-repeat; background-color: $blue; transition: background-color ease-in-out 0.1s; cursor: pointer; @include laptop { height: 42px; width: 42px; background-size: 8px; } &:active { background-color: $darkblue; } } &--next { transform: rotate(180deg); } }