// Trumps
// ==================================================
.hamburger {
  .hamburger-inner {
    &,
    &::before,
    &::after {
      background-color: $white;
    }
  }
}

.hamburger--header {
  padding-left: 5px;
  padding-right: 0;
  margin-right: -5px;
  vertical-align: middle;
  cursor: default;

  .hamburger-inner {
    &,
    &::before,
    &::after {
      background-color: $grey-darkest;
    }
  }

  &.hamburger--elastic,
  &.hamburger--slider {
    .hamburger-inner {
      top: 2px;
    }
  }

  &:hover {
    opacity: 1;
  }
}

.hamburger-wrap {
  text-align: center;
}

.hamburger--accessible {
  display: inline-block;

  .hamburger-box {
    display: inline-block;
    vertical-align: middle;
  }

  .hamburger-inner {
    &,
    &::before,
    &::after {
      background-color: $grey-darkest;
    }
  }
}

.hamburger-label {
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

.hamburger-label-hidden {
  display: none;
}

.hamburger--example {
  outline: 1px dashed cyan;

  .hamburger-box {
    outline: 1px dashed green;
  }

  .hamburger-inner {
    &,
    &::before,
    &::after {
      background-color: $grey-darkest;
    }
  }
}

.name {
  font-size: 0.8em;
  font-weight: 600;
  color: $white;
  padding-top: 1.25em;
  padding-top: 2em;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.section--information {

}

.information-directions {
  font-size: 14px;
  width: 100%;
}

.section--usage {

}

.browsers,
.types {
  padding-left: 0;
  list-style: none;

  li {
    margin-bottom: 0.25em;
  }
}

.browsers {
  padding-left: 1em;
  column-count: 2;
}

.hint {
  display: none;
  margin-bottom: 1em;

  &.is-visible {
    display: block;
  }
}

@media only screen and (min-width: 320px) {
  .browsers {
    column-count: 2;
  }
}

@media only screen and (min-width: 480px) {
  .types {
    column-count: 2;
  }

  .browsers {
    column-count: 3;
  }
}

@media only screen and (min-width: 640px) {
  .information-directions {
    font-size: 15px;
  }
}
