@import "../../../scss/variables";
@import "../../../scss/breakpoints.mixins";
@import "../../../scss/typo.mixins";
@import "../../../scss/grid.mixins";

$z-index-footer-menu-title: 199;
$z-index-footer-menu-content: 198;

.footer-menu-item {
  display: block;
  background: $color-dark-indigo;
  border-top: 1px solid $color-st-tropaz;

  @include media-breakpoint-up(tablet) {
    border-top: 0;
    flex: 1;
  }
}

.footer-menu-item__title {
  @extend %typo-20;

  position: relative;
  z-index: $z-index-footer-menu-title;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 30px;
  font-weight: $font-weight-semibold;
  color: #fff;

  &:hover,
  &:focus {
    color: #fff;
    text-decoration: none;
  }

  @include media-breakpoint-up(tablet) {
    @include typo-16;

    height: auto;
    padding: 0 0 5px;
    font-weight: bold;
    text-transform: uppercase;
  }
}

.footer-menu-item__title__icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform $transition-slow $transition-ease;

  .footer-menu-item.is-open & {
    transform: rotate(180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }

  @include media-breakpoint-up(tablet) {
    display: none;
  }
}

.footer-menu-item__content {
  z-index: $z-index-footer-menu-content;
  display: block;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style-type: none;
  background: $color-st-tropaz;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) inset;
  transition: max-height $transition-slow $transition-ease;

  .footer-menu-item.is-open & {
    max-height: 300px; // TODO: enough for 5 items, more are cut off
  }

  @include media-breakpoint-up(tablet) {
    max-height: none;
    background: transparent;
    box-shadow: none;
    transition: none;
  }
}

.footer-menu-item__item {
  padding: 0;
  margin: 0;
}