.button{display:inline-flex;cursor:pointer;border:0;border-radius:$borderRadius;align-items:center;justify-content:center;position:relative;white-space:nowrap;height:$buttonHeight;padding:0 calc($block * 2);min-width:$buttonMinWidth;box-sizing:border-box;font-weight:$fontWeightBold;font-family:$fontFamily;-webkit-font-smoothing:antialiased;font-size:$fontSizeBase;line-height:$lineHeightBase;text-decoration:none;transition:$transitionFast;transition-property:background-color,color,opacity}.button:hover{text-decoration:none}.button:focus,.button:active{outline:none}.fullWidth{width:100%}.large{height:$largeButtonHeight;font-size:$fontSizeMdLg}.button.disabled{background:$alto;color:$white;cursor:not-allowed}.primary{background:$unbounceBlue;color:$white}.primary:hover{background:$kleinBlue}.primary:active,.primary:focus{background:$kleinBlue}.button:disabled.primary:hover,.primary.disabled:hover{background:$alto}.secondary{background:transparent;border:2px solid $unbounceBlue;color:$unbounceBlue}.secondary:hover{background:$silverAlto}.secondary:hover,.secondary:active,.secondary:focus{background:$unbounceBlue;color:$white}.secondary.disabled{background:$#fff;border-color:$alto;color:$alto}.tertiary{background:transparent;border:$borderWidth solid $scorpion;border-width:2px;color:$scorpion}.tertiary:hover{background:$scorpion;color:$white}.tertiary:active,.tertiary:focus{background-color:$scorpion;color:$white}.tertiary.button:disabled,.tertiary.disabled{border-color:$alto;background-color:transparent;color:$alto}.quaternary{font-family:$fontFamilySecondary;font-size:$fontSizeMd;background:transparent;color:$emperor}.quaternary:active,.quaternary:focus{background:transparent}.button:disabled.quaternary:hover,.quaternary.disabled:hover{background:$alto}.remove{background:$radicalRed;color:$white}.remove:hover{background:$amaranth}.remove:active,.remove:focus{background:$radicalRed}.disabled.remove:hover{background:$alto}.button.darkEnv.disabled{background:$emperor;color:$scorpion;cursor:not-allowed}.darkEnv.primary{background:$unbounceBlue;color:$white}.darkEnv.primary:hover{background:$#1e90ff}.darkEnv.primary:active,.darkEnv.primary:focus{background:$unbounceBlue}.darkEnv.primary.disabled:hover{background:$emperor}.darkEnv.secondary{background:$gullGray_DEPRECATED;color:$white}.darkEnv.secondary:hover{background:$heather_DEPRECATED}.darkEnv.secondary:active,.darkEnv.secondary:focus{background:$gullGray_DEPRECATED}.darkEnv.secondary.disabled:hover{background:$emperor}.darkEnv.tertiary{background:transparent;border:$borderWidth solid $pampas;color:$pampas}.darkEnv.tertiary:hover{border-color:$silverChalice;background-color:$silverChalice;color:$white}.darkEnv.tertiary:active,.darkEnv.tertiary:focus{background:transparent;border-color:$pampas;color:$pampas}.darkEnv.tertiary.button:disabled,.darkEnv.tertiary.disabled{border-color:$emperor;color:$emperor;background-color:transparent}.darkEnv.remove{background:$radicalRed;color:$white}.darkEnv.remove:hover{background:$amaranth}.darkEnv.remove:active,.darkEnv.remove:focus{background:$radicalRed}.darkEnv.remove.disabled:hover{background-color:$emperor}$width: 58px; $switchSize: 24px; $transition: .2s ease-in-out; .toggle{font-family:$fontFamily;display:inline-block;background-color:$white;border-radius:calc($switchSize + 2px);border:$borderWidth solid $alto;box-sizing:content-box;cursor:pointer;height:$switchSize;position:relative;transition:background-color $transition;width:$width;padding:0}.dark.toggle{border:none;background-color:$gray}.toggle:focus{border-color:$silver;outline:none}.dark.toggle:focus{border-color:none}.toggle.on{background-color:$unbounceBlue}.toggle.disabled{cursor:not-allowed;background-color:$pampas}.dark.toggle.disabled{background-color:$scorpion}.switcher{background-color:$white;border-radius:100%;box-shadow:0 1px 3px $ gray;height:$switchSize;left:0;position:relative;transition:left $transition;width:$switchSize}.toggle.dark .switcher{box-shadow:0 1px 3px $ gray}.toggle.disabled .switcher{background-color:$pampas}.toggle.dark.disabled .switcher{box-shadow:0 1px 3px $ emperor;background-color:$gray}.toggle.on .switcher{left:calc($width - $switchSize)}.label{align-items:center;display:flex;font-size:$fontSizeBase;height:100%;justify-content:center;position:absolute;top:0;transition:opacity $transition;-webkit-user-select:none;user-select:none;width:calc($width - $switchSize)}.labelOn{composes:label;opacity:0;left:1px;color:$white}.toggle.dark.disabled .labelOn,.toggle.dark.disabled .labelOff{color:$emperor}.toggle.on .labelOn{opacity:1;transition:opacity $transition}.labelOff{composes:label;color:$silver;opacity:1;right:1px}.toggle.on .labelOff{opacity:0;transition:opacity $transition}.toggle.disabled .labelOff,.toggle.disabled .labelOn{color:$silver}$miniWidth: 34px; $miniHeight: 14px; .mini{width:$miniWidth;height:$miniHeight;margin:0 $miniWidth;border-radius:calc($miniHeight / 2);border:none;position:relative;box-shadow:inset 0 1px 2px #0006;padding:0;cursor:pointer}.mini:focus{border-color:none;outline:none}.mini.toggle:focus{border-color:none}.mini .labelOn{opacity:1;color:$silver;position:absolute;left:calc($miniWidth)}.mini .labelOff{opacity:1;position:absolute;left:-$miniWidth;color:$unbounceBlue}.mini .switcher{width:$miniHeight;height:$miniHeight}.mini.on{background-color:$unbounceBlue}.mini.on .labelOn{color:$unbounceBlue}.mini.on .labelOff{color:$silver}.mini.on .switcher{left:calc($miniWidth - $miniHeight)}.mini.disabled{background-color:$pampas;cursor:not-allowed}.mini.disabled .switcher{background-color:$pampas}.mini.disabled .labelOn,.mini.disabled .labelOff,.mini.on.disabled .labelOn{color:$silverAlto}.dark.mini{background-color:$emperor}.dark.mini .switcher{box-shadow:0 1px 3px $ emperor}.dark.mini.on{background-color:$unbounceBlue}.dark.mini .labelOff{color:$white}.dark.mini .labelOn,.dark.mini.on .labelOff{color:$scorpion}.dark.mini.on .labelOn{color:$white}.dark.mini.disabled{background-color:$scorpion}.dark.mini.disabled .switcher{background-color:$gray}.dark.mini.disabled .labelOn,.dark.mini.disabled .labelOff,.dark.mini.on.disabled .labelOn{color:$scorpion}.link{color:$unbounceBlue;font-weight:$fontWeightBold;text-decoration:none}.link:hover,.link:active,.link:focus{color:$unbounceBlue;text-decoration:none}$addButtonIconSize: 10px; .addButton{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border:0;outline:none;background:transparent;font-family:$fontFamily;font-size:$fontSizeMd;font-weight:$fontWeightSemiBold;line-height:$lineHeightBase;-webkit-font-smoothing:antialiased;text-decoration:none;color:$unbounceBlue;height:$buttonHeight;min-width:$buttonMinWidth;box-sizing:border-box;padding:0}.iconCircle{display:flex;justify-content:center;align-items:center;width:calc($addButtonIconSize * 2);height:calc($addButtonIconSize * 2);border:$borderWidthMd solid $unbounceBlue;border-radius:50%;margin-right:$block;transition:$transitionFast;transition-property:background-color}.icon{line-height:$addButtonIconSize;transition:$transitionFast;transition-property:fill}.addButton .icon{fill:$unbounceBlue}.addButton:hover .iconCircle{background-color:$unbounceBlue}.addButton:hover .icon{fill:$white}.addButton[disabled]:hover .iconCircle{background-color:transparent}.addButton[disabled]:hover .icon,.addButton[disabled] .icon{fill:$alto}.addButton[disabled]{cursor:not-allowed;color:$alto}.addButton[disabled] .iconCircle{border-color:$alto}.icon{display:inline-block;line-height:0}$deleteButtonIconSize: 15px; .deleteButton{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border:0;outline:none;background:transparent;font-weight:$fontWeightBold;-webkit-font-smoothing:antialiased;text-decoration:none;color:$radicalRed;box-sizing:border-box;padding:0}.icon{line-height:$deleteButtonIconSize;transition:none;transition-property:fill;padding-right:10px}.deleteButton .icon{padding:9px;fill:$radicalRed}.deleteButton[disabled]:hover .icon,.deleteButton[disabled] .icon{fill:$alto}.deleteButton[disabled]{cursor:not-allowed;color:$alto}.chromeHackForDisabledButtonMouseEvents{inset:0;position:absolute}$moreHeight: 22px; .wrapper{border-right:none;padding:0 calc($block * 2.5);height:100%;margin-left:10px;display:flex;align-items:center;flex:0 0 auto;border:none;background-color:transparent;outline:none}.separator{border-left:1px solid $gallery}.icon{height:$moreHeight;cursor:pointer}.iconButton{display:inline-block;background:none;border:none;padding:0;cursor:pointer}.iconButton:active,.iconButton:focus{outline:-webkit-focus-ring-color auto 1px}.icon{overflow:hidden}.alto{fill:$alto}.citrus_DEPRECATED{fill:$citrus_DEPRECATED}.mineShaft{fill:$mineShaft}.crow{fill:$crow}.dodgerBlue{fill:$dodgerBlue}.scorpion{fill:$scorpion}.emperor{fill:$emperor}.error{fill:$radicalRed}.fawn_DEPRECATED{fill:$fawn_DEPRECATED}.gray{fill:$gray}.greenTea_DEPRECATED{fill:$greenTea_DEPRECATED}.gullGray_DEPRECATED{fill:$gullGray_DEPRECATED}.heather_DEPRECATED{fill:$heather_DEPRECATED}.kleinBlue{fill:$kleinBlue}.gallery{fill:$gallery}.hippie_DEPRECATED{fill:$hippie_DEPRECATED}.success{fill:$shamrock}.amaranth{fill:$amaranth}.linkWater{fill:$linkWater}.pink_DEPRECATED{fill:$pink_DEPRECATED}.raven{fill:$raven}.orange{fill:$orange}.silverAlto{fill:$silverAlto}.silverChalice{fill:$silverChalice}.silver{fill:$silver}.shamrock{fill:$shamrock}.unbounceBlue{fill:$unbounceBlue}.radicalRed{fill:$radicalRed}.warning{fill:$orange}.pampas{fill:$pampas}.white{fill:$white}