.btn { // padding-top: $spacer / 2; // padding-right: $spacer; // padding-bottom: $spacer / 2; // padding-left: $spacer; display: inline-flex; align-items: center; justify-content: space-around; svg { // margin-right: $spacer / 4; } &:disabled { color: gray("600"); fill: currentColor; box-shadow: none !important; &:not(.btn-link) { border-color: gray("400"); background-color: gray("400"); } } } .btn-primary { background-color: $button-colour; border-radius: 8px; border: none; font-family: Inter; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; &:hover { background-color: $button-colour-hover; } &:not(:disabled):not(.disabled):active:focus, &:focus-visible { border: none; box-shadow: none; background-color: $button-colour-click; } &:focus { border: none; box-shadow: none; background-color: $button-colour; } &:active { border: none; box-shadow: none; background-color: $button-colour; } } .btn-secondary { fill: currentColor; &:focus, &:not(:disabled):not(.disabled):active:focus { border-color: $white; box-shadow: inset 0 0 0 2px theme-color('secondary'); } } // Global style for all button link .btn-link { font-weight: $headings-font-weight; fill: theme-color("primary"); text-decoration: none !important; &:hover { background-color: gray("200"); color: theme-color("primary"); } &:active { background-color: gray("300"); } &:focus { // box-shadow: inset 0 0 0 2px theme-color("primary"); // color: theme-color("primary"); // outline: none; } &:disabled { box-shadow: $btn-focus-box-shadow; } } // Icon only buttons .btn-icon-only svg { margin-right: 0; } // Datepicker, clear search and Password toggle buttons .input-action-btn, .btn-datepicker { position: absolute; right: 0; top: 0; z-index: $zindex-dropdown + 1; } // Contain input buttons within input .btn-datepicker .dropdown-toggle, .input-action-btn { padding: 7px; margin: 1px; }