$dropdown-content-background-color: $white !default $dropdown-content-arrow: $link !default $dropdown-content-offset: 4px !default $dropdown-content-radius: $radius !default $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $dropdown-content-z: 20 !default $dropdown-item-color: $grey-dark !default $dropdown-item-hover-color: $black !default $dropdown-item-hover-background-color: $background !default $dropdown-item-active-color: $primary-invert !default $dropdown-item-active-background-color: $primary !default $dropdown-divider-background-color: $border !default .dropdown display: inline-flex position: relative vertical-align: top &.is-active, &.is-hoverable:hover .dropdown-menu display: block &.is-right .dropdown-menu left: auto right: 0 .dropdown-menu display: none left: 0 min-width: 12rem padding-top: $dropdown-content-offset position: absolute top: 100% z-index: $dropdown-content-z .dropdown-content background-color: $dropdown-content-background-color border-radius: $dropdown-content-radius box-shadow: $dropdown-content-shadow padding-bottom: 0.5rem padding-top: 0.5rem .dropdown-item color: $dropdown-item-color display: block font-size: 0.875rem line-height: 1.5 padding: 0.375rem 1rem position: relative a.dropdown-item padding-right: 3rem white-space: nowrap &:hover background-color: $dropdown-item-hover-background-color color: $dropdown-item-hover-color &.is-active background-color: $dropdown-item-active-background-color color: $dropdown-item-active-color .dropdown-divider background-color: $dropdown-divider-background-color border: none display: block height: 1px margin: 0.5rem 0