eventoL/eventoL

@import '../../styles/variables';
@import '../../styles/commons';

.list-toggle {
  border: 2px solid $black;
  border-radius: 32px;
  font-size: 16px;
  height: 32px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 32px;

  &[data-toggled='true'] {
    background: $eventol-color;
    border: 2px solid $eventol-color;

    div {
      top: -32px;
    }
  }

  div {
    -webkit-transition: .125s ease;
    height: 64px;
    left: 0;
    position: absolute;
    top: 0;
    transition: .125s ease;
    width: 32px;

    i {
      @extend %flex-element;
      -ms-flex-align: center;
      -ms-flex-pack: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      align-items: center;
      height: 32px;
      justify-content: center;
      width: 32px;
    }
  }
}

.list-toggle:hover {
  border: 2px solid $black;

  div {
    top: -32px;
  }
}