@mixin btn-day($with-disabled: true) { $base-color: white; .btn-day { color: var(--text-fg); background-color: $base-color; border-color: var(--medium-border) !important; @content ($base-color); &:hover { background-color: darken($base-color, 8%); } &:active, &.active { @include impressed-shadow(0.25); } &:active.active { box-shadow: none; } @if ($with-disabled) { &[disabled] { background-color: $base-color !important; box-shadow: none !important; } } } } @mixin btn-night($with-disabled: true) { $base-color: #666; .btn-night { color: var(--text-fg); background-color: $base-color; border-color: $base-color; @content ($base-color); &:hover { background-color: lighten($base-color, 8%); border-color: lighten($base-color, 8%); } &:active, &.active { @include impressed-shadow(0.35); border-color: darken($base-color, 8%); } &:active.active { box-shadow: none; border-color: $base-color; } @if ($with-disabled) { &[disabled] { background-color: $base-color !important; box-shadow: none !important; border-color: $base-color !important; } } } } @mixin impressed-shadow($intensity) { box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5) rgba(black, $intensity); } @mixin rainbow($base) { background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%), border-box $base; }