.cux-footer-main {
  margin: 0;
  overflow: hidden;
  background: $color-blue-300;
}

.cux-footer-menu-container {
  padding: 0;

  .container {
    padding: 0;
  }
}

.cux-footer-menu {
  margin: 0;

  h4 {
    @include font-size(20);
    @extend %flexbox-row;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    border-top: 1px solid $color-blue-200;
    position: relative;

    > a,
    > span {
      @extend %flexbox-row;
      justify-content: space-between;
      padding: $margin-normal $margin-double;
      padding-left: calc(#{$margin-double} + env(safe-area-inset-left));
      padding-right: calc(#{$margin-double} + env(safe-area-inset-right));
      color: $color-white;
      text-transform: uppercase;
      letter-spacing: .05em;
      line-height: 1.3;
      width: 100%;

      &:hover,
      &:active {
        text-decoration: none;
      }

      &:after {
        content: '';
        display: none;
      }
    }

    .pictogram {
      vertical-align: -.4em;
      transition: transform .2s ease;
    }

    .pictogram-plus {
      display: inline-block;
    }

    .pictogram-chevron {
      display: none;
    }

    &.expanded {
      .pictogram-plus {
        transform: rotate(45deg);
      }
    }

    + ul {
      background: $color-white;
      max-height: 0;
      transition: max-height .5s;
      overflow: hidden;

      &.expanded {
        max-height: 500px;
      }

      a {
        @include font-size(20);
        display: block;
        padding: $margin-normal $margin-double;
        padding-left: calc(#{$margin-double} + env(safe-area-inset-left));
        padding-right: calc(#{$margin-double} + env(safe-area-inset-right));
        /* stylelint-disable max-nesting-depth */
        &:hover,
        &:active {
          background: $color-blue-100;
          text-decoration: none;
        }

        .pictogram {
          display: none;
        }
        /* stylelint-enable */
      }
    }
  }

  ul {
    margin: 0;
    list-style: none;
  }

  @include breakpoint(sm) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    color: $color-white;
    padding: 0 0 $margin-normal;
    border: 0;

    h4 {
      border-top: 0;
      margin-top: $margin-normal;

      > a {
        display: inline-block;
        /* stylelint-disable max-nesting-depth */
        &:hover,
        &:active {
          text-decoration: underline;
        }
        /* stylelint-enable */
      }

      .pictogram-plus {
        display: none;
      }

      .pictogram-chevron {
        display: inline-block;
      }

      span,
      a {
        padding: $margin-half 0;
        border-top: 0;
        /* stylelint-disable max-nesting-depth */
        &:hover,
        &:active {
          background: transparent;
        }

        .icon-arrow-down {
          display: none;
        }
        /* stylelint-enable */
      }

      + ul {
        display: block;
        max-height: 800px;
        background: transparent;
        /* stylelint-disable max-nesting-depth */
        a {
          @include font-size(18);
          color: $text-color;
          padding: $margin-half 0;

          &:hover,
          &:active {
            background: transparent;
            text-decoration: underline;
          }
        }
        /* stylelint-enable */
      }
    }

    ul {
      display: block;
      min-width: 30%;
      max-height: 800px;
      border-top: 0;

      ul {
        margin: 0;
      }
    }

    .footer-menu-item {
      flex-grow: 1;
      margin: 0 $margin-normal $margin-double;
    }

    .footer-smile-logo {
      display: block;
      margin: $margin-double auto;

      @include breakpoint(sm) {
        margin: 0 auto;
        float: right;
      }
    }

    @include breakpoint(lg) {
      padding-top: $margin-double;

      h4 {
        @include font-size(18);
        /* stylelint-disable max-nesting-depth */
        + ul {
          a {
            @include font-size(18);
          }
        }
        /* stylelint-enable */
      }
    }
  }
}