/**
* The only required property for the container is the display property,
* that must be inline-block
*/
.speed-dial {
  display: inline-block; }

.speed-dial__btn {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  min-width: 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  margin: auto;
  border-radius: 50%;
  font-size: 24px;
  overflow: hidden;
  line-height: normal;
  border: none;
  outline: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  color: rgba(0, 0, 0, 0.87);
  background: #EEEEEE; }

.speed-dial__option {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  min-width: 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  margin: auto;
  border-radius: 50%;
  font-size: 19px;
  overflow: hidden;
  line-height: normal;
  border: none;
  outline: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  color: rgba(0, 0, 0, 0.87);
  background: #EEEEEE; }

/**
* A set of modifiers for the container which will effect the button and the
* options
*/
.speed-dial--small .speed-dial__btn {
  min-width: 32px;
  width: 32px;
  height: 32px;
  font-size: 16px; }

.speed-dial--small .speed-dial__option {
  min-width: 26px;
  width: 26px;
  height: 26px;
  font-size: 12px; }

.speed-dial--blue .speed-dial__btn {
  background: #2980b9;
  color: white; }

.speed-dial--pink .speed-dial__btn {
  background: #E91E63;
  color: white; }

.speed-dial--material .speed-dial__btn,
.speed-dial--material .speed-dial__option {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: box-shadow 300ms ease-out;
  transition: box-shadow 300ms ease-out; }
  .speed-dial--material .speed-dial__btn:hover,
  .speed-dial--material .speed-dial__option:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
  .speed-dial--material .speed-dial__btn:active,
  .speed-dial--material .speed-dial__option:active {
    box-shadow: none; }

/**
* Eventually you can change the speed dial button appearence when
* the list of options is open.
*/
.speed-dial--toggle .speed-dial__list.is-visible + .speed-dial__btn {
  box-shadow: none !important;
  background: #EEEEEE !important;
  color: rgba(0, 0, 0, 0.87) !important; }

/**
* Below are the main rules for the list of options
*/
.speed-dial__list {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none; }
  .speed-dial__list li {
    display: inline-block;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto; }

.speed-dial__option {
  -webkit-transform: scale(0);
  transform: scale(0); }

/* UP */
.speed-dial--up .speed-dial__list {
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.speed-dial--up:not(.speed-dial--small) .speed-dial__list {
  bottom: 100%;
  padding-bottom: 4px;
  left: 5px; }
  .speed-dial--up:not(.speed-dial--small) .speed-dial__list li {
    margin: 0 0 10px 0; }

.speed-dial--up.speed-dial--small .speed-dial__list {
  bottom: 100%;
  padding-bottom: 1px;
  left: 3px; }
  .speed-dial--up.speed-dial--small .speed-dial__list li {
    margin: 0 0 9px 0; }

/* RIGHT */
.speed-dial--right .speed-dial__list {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row; }

.speed-dial--right:not(.speed-dial--small) .speed-dial__list {
  bottom: 5px;
  padding-left: 14px; }
  .speed-dial--right:not(.speed-dial--small) .speed-dial__list li {
    margin: 0 10px 0 0; }

.speed-dial--right.speed-dial--small .speed-dial__list {
  bottom: 3px;
  padding-left: 12px; }
  .speed-dial--right.speed-dial--small .speed-dial__list li {
    margin: 0 9px 0 0; }

/* LEFT */
.speed-dial--left .speed-dial__list {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.speed-dial--left:not(.speed-dial--small) .speed-dial__list {
  bottom: 5px;
  padding-right: 14px; }
  .speed-dial--left:not(.speed-dial--small) .speed-dial__list li {
    margin: 0 0 0 10px; }

.speed-dial--left.speed-dial--small .speed-dial__list {
  bottom: 3px;
  padding-right: 12px; }
  .speed-dial--left.speed-dial--small .speed-dial__list li {
    margin: 0 0 0 9px; }

/* DOWN */
.speed-dial--down .speed-dial__list {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.speed-dial--down:not(.speed-dial--small) .speed-dial__list {
  top: 100%;
  left: 5px;
  padding-top: 4px; }
  .speed-dial--down:not(.speed-dial--small) .speed-dial__list li {
    margin: 10px 0 0 0; }

.speed-dial--down.speed-dial--small .speed-dial__list {
  top: 100%;
  left: 3px;
  padding-top: 1px; }
  .speed-dial--down.speed-dial--small .speed-dial__list li {
    margin: 9px 0 0 0; }

/* VISIBLE LIST */
.speed-dial__list.is-visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1; }
  .speed-dial__list.is-visible .speed-dial__option {
    -webkit-animation-name: enter;
    animation-name: enter;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s; }
  .speed-dial__list.is-visible li:nth-of-type(1) .speed-dial__option {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
  .speed-dial__list.is-visible li:nth-of-type(2) .speed-dial__option {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
  .speed-dial__list.is-visible li:nth-of-type(3) .speed-dial__option {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
  .speed-dial__list.is-visible li:nth-of-type(4) .speed-dial__option {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
  .speed-dial__list.is-visible li:nth-of-type(5) .speed-dial__option {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
  .speed-dial__list.is-visible li:nth-of-type(6) .speed-dial__option {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }

@-webkit-keyframes enter {
  from {
    -webkit-transform: scale(0);
    transform: scale(0); }
  to {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes enter {
  from {
    -webkit-transform: scale(0);
    transform: scale(0); }
  to {
    -webkit-transform: scale(1);
    transform: scale(1); } }