superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/_buttons.scss

@@ -0,0 +1,874 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+
+$button-margin: 0 !default;
+$button-opacity-disabled: 0.60 !default;
+$icn-button-opacity-disabled: 0.40 !default;
+
+// /// transitions for buttons.
+$button-transition: all 0.2s ease-out, color 0.1s ease-out !default;
+$button-focus-box-shadow: 0 0 0 3px colors.$sd-colour--focus-shadow;
+$icn-button-focus-box-shadow: 0 0 0 2px colors.$sd-colour--focus-shadow;
+
+////////////////////////////// NEW BUTTONS //////////////////////////////
+
+:root {
+    --new-button-hover-shadow: inset 0 0 0 3px hsla(0, 0%, 0%, 0.24);
+    --new-button-active-shadow: inset 0 0 0 5px hsla(0, 0%, 0%, 0.24);
+}
+
+[data-theme="dark-ui"], .dark-ui {
+    --new-button-hover-shadow: inset 0 0 0 3px hsla(0, 0%, 100%, 0.24);
+    --new-button-active-shadow: inset 0 0 0 5px hsla(0, 0%, 100%, 0.32);
+}
+
+@mixin new-button-base {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    margin: $button-margin;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: dimensions.$padding-x__button--default;
+    height: dimensions.$height__button--default;
+    font-size: dimensions.$font-size__button--default;
+    -webkit-appearance: none;
+    border: none;
+    border-radius: var(--b-radius--small);
+    transition: $button-transition;
+    text-transform: uppercase;
+    line-height: 1;
+    font-weight: 400;
+    letter-spacing: 0.1em;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    background-color: var(--sd-btn-bg);
+    box-shadow: inset 0 0 0 0 var(--new-button-hover-shadow);
+    gap: 0.6rem;
+
+    &:hover {
+        box-shadow: var(--new-button-hover-shadow);
+        text-decoration: none !important;
+    }
+
+    &:active {
+        box-shadow: var(--new-button-active-shadow);
+    }
+
+    &:focus-visible {
+        outline: $button-focus-box-shadow;
+        outline-offset: 1px;
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+}
+
+@mixin new-button-hollow {
+    border: 1px solid var(--sd-btn-border);
+    background-color: transparent !important;
+    box-shadow: inset 0 0 0 0 var(--sd-btn-shadow);
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: var(--sd-btn-color);
+    }
+
+    &:hover {
+        box-shadow: inset 0 0 0 3px var(--sd-btn-shadow);
+    }
+
+    &:active {
+        box-shadow: inset 0 0 0 5px var(--sd-btn-shadow);
+    }
+
+    &:focus-visible {
+        outline: $button-focus-box-shadow;
+        outline-offset: 1px;
+    }
+}
+
+@mixin new-button-text-only {
+    --sd-btn-shadow: var(--color-surface-faded-translucent);
+    --sd-btn-txt: var(--color-text-muted);
+    --sd-btn-bg--hover: var(--color-neutral-light-default);
+    border: none;
+    background-color: transparent;
+    box-shadow: inset 0 0 0 0 var(--sd-btn-shadow);
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+
+    &:hover {
+        background-color: var(--sd-btn-bg--hover);
+        box-shadow: inset 0 0 0 0 var(--sd-btn-bg--shadow);
+    }
+
+    &:active {
+        background-color: var(--sd-btn-bg--hover);
+        box-shadow: inset 0 0 0 4px var(--sd-btn-shadow);
+    }
+
+    &:focus-visible {
+        box-shadow: $button-focus-box-shadow;
+    }
+}
+
+.btn {
+    --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+    --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+    --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+    color: var(--sd-colour-btn-txt-neutral);
+    @include new-button-base;
+
+    [class^="icon-"], [class*=" icon-"] {
+        margin-inline-start: -0.3rem;
+    }
+
+    // Hollow style
+    &.btn--hollow {
+        --sd-btn-border: var(--color-line-strong);
+        --sd-btn-color: var(--color-text-muted);
+        --sd-btn-shadow: var(--color-line-light);
+        color: var(--sd-btn-color);
+        @include new-button-hollow;
+
+        &.btn--primary {
+            --sd-btn-border: var(--sd-colour-interactive);
+            --sd-btn-color: var(--sd-colour-interactive--text);
+            --sd-btn-shadow: var(--sd-colour-interactive-translucent-25);
+        }
+
+        &.btn--success {
+            --sd-btn-border: var(--color-success-default);
+            --sd-btn-color: var(--color-success-text);
+            --sd-btn-shadow: var(--color-success-translucent);
+        }
+
+        &.btn--warning {
+            --sd-btn-border: var(--color-warning-default);
+            --sd-btn-color: var(--color-warning-text);
+            --sd-btn-shadow: var(--color-warning-translucent);
+        }
+
+        &.btn--alert {
+            --sd-btn-border: var(--color-alert-default);
+            --sd-btn-color: var(--color-alert-text);
+            --sd-btn-shadow: var(--color-alert-translucent);
+        }
+
+        &.btn--highlight {
+            --sd-btn-border: var(--color-highlight-default);
+            --sd-btn-color: var(--color-highlight-text);
+            --sd-btn-shadow: var(--color-highlight-translucent);
+        }
+
+        &.btn--sd-green {
+            --sd-btn-border: var(--sd-colour-superdesk-btn-border);
+            --sd-btn-color: var(--sd-colour-superdesk);
+            --sd-btn-shadow: var(--sd-colour-superdesk--translucent);
+        }
+
+        &.btn--primary,
+        &.btn--success,
+        &.btn--warning,
+        &.btn--alert,
+        &.btn--highlight,
+        &.btn--sd-green {
+            color: var(--sd-btn-color);
+
+            .sd-spinner__path {
+                stroke: var(--sd-btn-color);
+            }
+        }
+    }
+
+    // Text only
+    &.btn--text-only {
+        @include new-button-text-only;
+
+        &.btn--primary {
+            --sd-btn-shadow: var(--color-primary-translucent);
+            --sd-btn-txt: var(--color-primary-text);
+            --sd-btn-bg--hover: var(--color-primary-translucent);
+        }
+
+        &.btn--success {
+            --sd-btn-shadow: var(--color-success-translucent);
+            --sd-btn-txt: var(--color-success-text);
+            --sd-btn-bg--hover: var(--color-success-translucent);
+        }
+
+        &.btn--warning {
+            --sd-btn-shadow: var(--color-warning-translucent);
+            --sd-btn-txt: var(--color-warning-text);
+            --sd-btn-bg--hover: var(--color-warning-translucent);
+        }
+
+        &.btn--alert {
+            --sd-btn-shadow: var(--color-alert-translucent);
+            --sd-btn-txt: var(--color-alert-text);
+            --sd-btn-bg--hover: var(--color-alert-translucent);
+        }
+
+        &.btn--highlight {
+            --sd-btn-shadow: var(--color-highlight-translucent);
+            --sd-btn-txt: var(--color-highlight-text);
+            --sd-btn-bg--hover: var(--color-highlight-translucent);
+        }
+
+        &.btn--sd-green {
+            --sd-btn-hs: var(--sd-colour-superdesk-hs);
+        }
+
+        &.btn--primary,
+        &.btn--success,
+        &.btn--warning,
+        &.btn--alert,
+        &.btn--highlight,
+        &.btn--sd-green {
+            color: var(--sd-btn-txt);
+
+            .sd-spinner__path {
+                stroke: var(--sd-btn-txt);
+            }
+        }
+    }
+
+    &.btn--icon-only {
+        padding-inline: var(--space--1);
+        [class^="icon-"], [class*=" icon-"] {
+            margin: 0;
+        }
+        &.btn--small {
+            padding-inline: var(--space--0-5);
+        }
+
+        &.btn--large {
+            padding-inline: var(--space--1-5);
+        }
+
+        &.btn--icon-only-circle {
+            border-radius: dimensions.$border-radius__base--full;
+            padding: 0;
+            width: dimensions.$height__button--default;
+
+            &.btn--small {
+                width: dimensions.$height__button--small;
+            }
+
+            &.btn--large {
+                width: dimensions.$height__button--large;
+            }
+        }
+    }
+
+    &.btn--disabled, &[disabled] {
+        opacity: $button-opacity-disabled;
+        cursor: not-allowed;
+
+        :not(.no-disable) {
+            pointer-events: none;
+        }
+
+        box-shadow: none !important;
+
+        &:hover, &:active {
+            cursor: not-allowed;
+        }
+    }
+}
+
+// Sizes
+.btn--small {
+    padding: dimensions.$padding-x__button--small;
+    height: dimensions.$height__button--small;
+    font-size: dimensions.$font-size__button--small;
+}
+
+.btn--large {
+    padding: dimensions.$padding-x__button--large;
+    height: dimensions.$height__button--large;
+    font-size: dimensions.$font-size__button--large;
+}
+
+.btn--expanded {
+    width: 100%;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+}
+
+// Colours
+.btn--primary, .btn--success, .btn--warning, .btn--alert, .btn--highlight, .btn--sd-green {
+    color: var(--color-text-ondark);
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: var(--color-text-ondark);
+    }
+
+    .sd-spinner__path {
+        stroke: var(--color-text-ondark);
+    }
+}
+
+.btn--primary {
+    --sd-btn-bg: var(--sd-colour-primary);
+    --sd-btn-bg--hover: var(--sd-colour-primary--hover);
+    --sd-btn-bg--active: var(--sd-colour-primary--active);
+}
+
+.btn--success {
+    --sd-btn-bg: var(--color-success-default);
+    --sd-btn-bg--hover: var(--color-success-default);
+    --sd-btn-bg--active: var(--color-success-default);
+}
+
+.btn--warning {
+    --sd-btn-bg: var(--color-warning-default);
+    --sd-btn-bg--hover: var(--color-warning-default);
+    --sd-btn-bg--active: var(--color-warning-default);
+}
+
+.btn--alert {
+    --sd-btn-bg: var(--color-alert-default);
+    --sd-btn-bg--hover: var(--color-alert-default);
+    --sd-btn-bg--active: var(--color-alert-default);
+}
+
+.btn--highlight {
+    --sd-btn-bg: var(--color-highlight-default);
+    --sd-btn-bg--hover: var(--color-highlight-default);
+    --sd-btn-bg--active: var(--color-highlight-default);
+}
+
+.btn--sd-green {
+    --sd-btn-bg: var(--sd-colour-superdesk);
+    --sd-btn-bg--hover: var(--sd-colour-superdesk);
+    --sd-btn-bg--active: var(--sd-colour-superdesk);
+}
+
+////////////////////////////// END NEW BUTTONS /////////////////////////////
+
+// Plain Icon buttons
+@mixin icn-btn-style () {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+    transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
+    height: dimensions.$height__button--default;
+    width: dimensions.$height__button--default;
+    border-radius: dimensions.$border-radius__base--full;
+    background-color: transparent;
+    opacity: 0.75;
+    background-color: hsla(214, 13%, 55%, 0);
+    color: var(--color-icon-default);
+    text-decoration: none;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: var(--color-icon-default) !important;
+        vertical-align: baseline !important;
+        pointer-events: none;
+    }
+
+    &:hover {
+        opacity: 1;
+        text-decoration: none;
+        background-color: hsla(214, 13%, 55%, 0.2);
+    }
+
+    &:focus-visible {
+        opacity: 1;
+        background-color: hsla(214, 13%, 55%, 0.2);
+        box-shadow: $icn-button-focus-box-shadow;
+        outline: none;
+
+        [class^="icon-"], [class*=" icon-"] {
+            opacity: 1;
+        }
+    }
+
+    &:active {
+        opacity: 1;
+        background-color: hsla(214, 13%, 55%, 0.3);
+
+        [class^="icon-"], [class*=" icon-"] {
+            color: colors.$sd-colour-interactive;
+            opacity: 1;
+        }
+    }
+
+    &--disabled,
+    &:disabled {
+        opacity: $icn-button-opacity-disabled;
+        pointer-events: none;
+
+        &:hover, &:active, &:focus-visible {
+            background-color: transparent !important;
+            cursor: not-allowed;
+            opacity: $icn-button-opacity-disabled;
+
+            [class^="icon-"], [class*=" icon-"] {
+                opacity: 1;
+                color: inherit !important;
+            }
+        }
+    }
+}
+
+.icn-btn {
+    @include icn-btn-style;
+
+    &.icn-btn--x-large.icn-btn--outline,
+    &.icn-btn--x-large.icn-btn--outlineWhite {
+        border-width: 2px;
+    }
+}
+
+.icn-btn--small {
+    height: dimensions.$height__button--small;
+    width: dimensions.$height__button--small;
+}
+
+.icn-btn--x-large {
+    height: dimensions.$height__button--x-large;
+    width: dimensions.$height__button--x-large;
+
+    [class^="icon-"], [class*=" icon-"] {
+        vertical-align: baseline !important;
+        font-size: 2.4rem;
+        height: 2.4rem;
+        width: 2.4rem;
+        line-height: 2.4rem;
+    }
+
+}
+
+.icn-btn--outline {
+    border: 1px solid currentColor;
+
+    &:active:not(.icn-btn--disabled) {
+        border-color: var(--sd-colour-interactive);
+    }
+}
+
+.icn-btn--outlineWhite {
+    color: hsla(214, 13%, 95%, 0.8) !important;
+    border: 1px solid currentColor;
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: hsla(214, 13%, 95%, 0.8) !important;
+    }
+
+    &:hover:not(.icn-btn--disabled) {
+        color: hsla(214, 13%, 95%, 1) !important;
+        border-color: hsla(214, 13%, 95%, 1);
+        background-color: hsla(0, 0%, 0%, 0.4);
+        [class^="icon-"], [class*=" icon-"] {
+            color: hsla(214, 13%, 95%, 1) !important;
+        }
+    }
+
+    &:active:not(.icn-btn--disabled) {
+        border-color: var(--sd-colour-interactive);
+        background-color: hsla(0, 0%, 0%, 0.6);
+    }
+}
+
+.p-dialog-header-close {
+    @include icn-btn-style;
+    height: dimensions.$height__button--small;
+    width: dimensions.$height__button--small;
+
+    &:hover {
+        opacity: 1;
+        text-decoration: none;
+        background-color: hsla(0, 0%, 61%, 0.2) !important;
+    }
+
+    &:active {
+        opacity: 1;
+        background-color: hsla(0, 0%, 61%, 0.3);
+    }
+}
+
+// Button navigation
+.button-nav {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  gap: dimensions.$sd-base-increment;
+}
+
+.button-nav__btn {
+    color: var(--color-text);
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    padding-block-start: 0.7rem;
+    padding-block-end: 0.7rem;
+    padding-inline: 1.8rem;
+    background: transparent;
+    -webkit-appearance: none;
+    border: none;
+    border-radius: dimensions.$border-radius__base--full;
+    transition: $button-transition;
+    font-size: 1.4rem;
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: var(--sd-colour-bg__button-nav-btn);
+
+    &:hover {
+        background-color: var(--sd-colour-bg__button-nav-btn--hover);
+    }
+
+    &:active, &--active, &--active:hover {
+        background-color: var(--sd-colour-bg__button-nav-btn--active);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.25);
+    }
+}
+
+// Button icon group
+.btn-icon-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    [class^="icon-"], [class*=" icon-"] {
+        opacity: 0.6;
+    }
+}
+
+
+// BUTTON GROUPS
+.button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: dimensions.$sd-base-increment;
+
+    .btn {
+        margin: 0;
+    }
+}
+
+.button-group--left, .button-group--start {
+    margin-inline-end: auto;
+
+    .sd-navbtn {
+        border-inline-width: 0 1px;
+    }
+
+    &.button-group--compact {
+        gap: 0.5 * dimensions.$sd-base-increment;
+    }
+
+    .button-group--inline {
+        .sd-navbtn {
+            border-inline-width: 0 1px;
+        }
+    }
+}
+
+.button-group--inline {
+    margin-inline-end: 0;
+
+    .sd-navbtn {
+        border-inline-width: 0 1px;
+    }
+}
+
+.button-group--right, .button-group--end {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+}
+
+.button-group--center {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+
+    .sd-navbtn {
+        border-inline-width: 0 1px;
+        &:first-child {
+            border-inline-width: 1px 1px;
+        }
+    }
+}
+
+.button-group--vertical {
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+}
+
+.button-group--comfort {
+    gap: dimensions.$sd-base-increment;
+}
+
+.button-group--loose {
+    gap: dimensions.$sd-base-increment * 2;
+}
+
+.button-group--compact {
+    gap: dimensions.$sd-base-increment * 0.5;
+}
+
+.button-group--no-space {
+    gap: unset;
+}
+
+.button-group--padded {
+    padding-inline-start: dimensions.$sd-base-increment * 2;
+    padding-inline-end: dimensions.$sd-base-increment * 2;
+}
+
+.button-group__divider {
+    width: 1px;
+    height: dimensions.$sd-base-increment * 3;
+}
+
+.button-group__divider--mini {
+    padding: 0 !important;
+    width: 0;
+    border: none !important;
+}
+
+.button-group__divider--small {
+    margin-inline: var(--space--0-5);
+}
+
+.button-group__divider--medium {
+    margin-inline: var(--space--1);
+}
+
+.button-group__divider--large {
+    margin-inline: var(--space--1-5);
+}
+
+.button-group__divider--border {
+    border-inline-start: 1px dotted var(--sd-colour-line--strong);
+}
+
+.button-group--vertical {
+    .button-group__divider {
+        height: 1px;
+        width: auto;
+        margin-inline: var(--space--0);
+
+        &.button-group__divider--mini {
+            padding-block-start: var(--space--1-5);
+        }
+
+        &.button-group__divider--small {
+            margin-block: var(--space--0-5);
+        }
+
+        &.button-group__divider--medium {
+            margin-block: var(--space--1);
+        }
+
+        &.button-group__divider--large {
+            margin-block: var(--space--1-5);
+        }
+    }
+
+    .button-group__divider--border {
+        border-inline-start: none;
+        border-block-start: 1px dotted var(--sd-colour-line--strong);
+    }
+}
+
+.sd-create-btn {
+    width: 4.8rem;
+    height: 4.8rem;
+    line-height: 4.8rem;
+    padding: 0 !important;
+    overflow: hidden;
+    position: relative;
+    background: transparent;
+    vertical-align: top;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0 solid var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
+
+    .circle {
+        display: inline-block;
+        text-align: center;
+        width: 2.6rem;
+        height: 2.6rem;
+        margin: 0;
+        padding: 0;
+        border-radius: 50%;
+        background-color: var(--sd-colour-interactive);
+        color: hsl(0, 0%, 100%);
+        position: relative;
+        transition: all 0.2s ease;
+    }
+
+    &:hover {
+        .circle {
+            width: 3.4rem;
+            height: 3.4rem;
+            margin-inline-start: 0;
+        }
+    }
+
+    &:active {
+        .circle {
+            width: 6.8rem;
+            height: 6.8rem;
+            margin-inline-start: -1rem;
+            margin-inline-end: -1rem;
+            transition: all 0.05s ease;
+        }
+    }
+
+    i {
+        position: absolute;
+        z-index: 1;
+        display: block;
+        inset-block-start: 50%;
+        margin-block-start: -0.8rem;
+        inset-inline-start: 50%;
+        inset-inline-end: auto;
+        margin-inline-start: -0.8rem;
+        opacity: 1 !important;
+        color: hsl(0, 0%, 100%) !important;
+        line-height: 1.6rem !important;
+    }
+}
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.btn__state--loading {
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.btn--loading {
+    color: transparent;
+    pointer-events: none;
+}
+
+.btn {
+    &[data-loading="true"] {
+        pointer-events: none;
+
+        .sd-spinner {
+            margin-inline-start: -0.3rem;
+        }
+
+        &.btn--icon-only {
+            .sd-spinner {
+                margin-inline-start: 0;
+            }
+        }
+    }
+}
+
+.button-group {
+    .tag-label {
+        margin: 0 !important;
+    }
+}
+
+// ILLUSTRATION BUTTONS
+
+.illustration-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space--1);
+    border-radius: var(--b-radius--large);
+    border: 1px solid var(--sd-colour-line--light);
+    padding-inline: var(--space--2);
+    padding-block-start: var(--space--2);
+    padding-block-end: var(--space--1-5);
+    box-shadow: inset var(--sd-colour-interactive--alpha-30) 0 0 0 0, hsla(0, 0%, 0%, 0.16) 0 6px 12px -6px, hsla(0, 0%, 0%, 0.40) 0 2px 8px -8px;
+    transition: all 0.2s ease;
+    &:hover {
+        border: 1px solid var(--sd-colour-line--strong);
+        box-shadow: inset var(--sd-colour-interactive--alpha-30) 0 0 0 0, hsla(0, 0%, 0%, 0.24) 0 6px 12px -6px, hsla(0, 0%, 0%, 0.60) 0 2px 8px -8px;
+    }
+    &:active {
+        border: 1px solid var(--sd-colour-interactive);
+        box-shadow: inset var(--sd-colour-interactive--alpha-30) 0 0 0 4px;
+    }
+    &:focus-visible {
+        outline: 2px solid var(--sd-colour-interactive--alpha-60);
+        outline-offset: 1px;
+    }
+    &:disabled,
+    &.illustration-button--disabled {
+        box-shadow: none;
+        border: 1px solid var(--sd-colour-line--light);
+        pointer-events: none;
+        opacity: 0.6;
+    }
+
+}
+.illustration-button__illustration,
+.svg-icon-illustration {
+    display: inline-block;
+}
+.illustration-button__text-label {
+    font-size: var(--text-size-small);
+    font-weight: 500;
+    line-height: 1.2;
+    text-align: center;
+}
+
+.headless-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    outline: 1px solid transparent;
+    outline-offset: 0;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+        cursor: pointer;
+        outline-color: var(--sd-colour-interactive);
+        outline-offset: 1px;
+    }
+    &:active {
+        outline-width: 2px;
+    }
+    &:disabled {
+        opacity: 0.75;
+        cursor: not-allowed;
+        outline: none !important;
+    }
+}