//Custom button styles .btn { &.btn-primary { position: relative; background: $blue-700; background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); border: none; border-radius: $border-radius-lg; height: 48px; color: $white; transition: all 150ms linear; &:hover { background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%); } &:focus, // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility outline: none; box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; } &.button-loader { padding: 0 40px 0 12px; &:after { content: url(../../assets/img/icons/button-spinner-white.svg); position: absolute; right: 14px; width: 16px; height: 16px; margin-left: 12px; animation: rotation 1s infinite linear; @keyframes rotation { 100% { transform:rotate(360deg); } } } } &:disabled { background: $gray-100 !important; background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important; color: $gray !important; height: 48px; border: none; border-radius: $border-radius-lg; } } &.list-button { position: relative; background: $white; height: 48px; transition: all 150ms linear; border-radius: $border-radius-lg; border: 1px solid rgba($gray-300,.3); width: 100%; &:focus, // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility box-shadow: none; } &.button-loader { padding: 0 40px 0 12px; &:after { content: url(../../assets/img/icons/button-spinner-blue.svg); position: absolute; right: 14px; width: 16px; height: 16px; margin-left: 12px; animation: rotation 1s infinite linear; @keyframes rotation { 100% { transform:rotate(360deg); } } } } } }