.toggling-container {
  $self: &;
  $breakpoint: "sm";
  position: relative;
  margin: {
    left: -#{$spacing / 2};
    right: -#{$spacing / 2};
  }
  @include media-breakpoint-up($breakpoint) {
    margin-bottom: $spacing;
    margin: {
      left: 0;
      right: 0;
      bottom: $spacing;
    }
  }

  &__header {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    padding: 14px 20px 11px ($spacing / 2);
    position: relative;

    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      border: 0;
      margin: 0 0 14px 0;
      padding: 0;
    }

    .main {
      font-size: 20px;
      line-height: 1;

      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        font-size: 26px;
      }
    }

    .sub {
      font-size: 16px;
      line-height: 1.2;
      margin-top: 8px;
    }
  }

  &__toggler {
    padding: 10px;
    position: absolute;
    right: 12px;
    top: 17px;
    color: #666;

    &:before {
      content: "";
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &:hover {
      cursor: pointer;
    }

    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      display: none;
    }
  }

  &__title {
    font-size: $section-font-size;
    margin: 0;
    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      font-size: $section-font-size-desktop;
      line-height: $section-font-size-desktop - 1;
    }
    &--sm {
      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        font-size: $section-font-size-desktop - 4;
        line-height: $section-font-size-desktop - 1;
      }
    }
    &--indent {
      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        padding-left: 20px;
      }
    }
  }

  &__subtitle {
    margin: 0;
    font: {
      size: 16px;
    }
    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      margin-top: 10px;
    }
  }

  &__contents {
    display: none;

    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      display: block !important;
    }
    &-section {
      background-color: $white-smoke;
      margin: 0 -#{$spacing / 2};
      padding: 20px $spacing / 2 20px $spacing / 2;
      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        margin: 0;
        padding: 0;
      }
    }
  }

  &__close {
    font-weight: 500;
    font-size: 16px;
    line-height: 1em;
    padding: 19px 10px 15px 10px;
    text-align: center;
    border-top: $border;

    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      display: none !important;
    }
  }

  &.is-active {
    #{$self}__contents {
      background: #fff;
      display: block;
      position: absolute;
      z-index: 6;
      left: 0;
      right: 0;
      margin: {
        bottom: 10px;
      }

      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        left: auto;
        right: auto;
        padding: inherit;
        position: relative;
        margin: 0;
      }
    }

    #{$self}__toggler {
      position: absolute;
      height: 15px;
      width: 15px;
      padding: 15px;
      right: 0;
      top: 8px;
      //   background-color: red;

      &:before,
      &:after {
        height: 1px;
        background: $body-color;
        width: 15px;
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
      }

      &:before {
        content: "";
        border: none;
        transform: rotate(45deg);
      }

      &:after {
        content: "";
        transform: rotate(-45deg);
      }
    }

    .brand__list {
      border-top: none;
      border-left: none;
      margin-bottom: -1px;
      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        border-top: $border;
        border-left: $border;
        margin-bottom: 0;
      }
      &-item {
        @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        }
        &:nth-child(even) {
          border-right: none;
          @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
            border-right: $border;
          }
        }
      }
    }
  }

  // modifier
  &--accordion {
    #{$self}__contents {
      display: table-column;
      max-height: 0;
      //   overflow: hidden;
      padding: 0px 15px 14px 15px;

      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        max-height: 100% !important;
        transition: none !important;
        padding: 15px 0 0 0;
      }
    }

    #{$self}__header {
      //   border-top: 0;
      margin-bottom: 0;
    }

    #{$self}__toggler {
      top: 50%;
      transform: translateY(-50%);
      &:before,
      &:after {
        content: "";
        border: 0;
        border-top: 1px solid #7e7e7e;
        width: 12px;
      }

      &:after {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
      }
    }

    &.is-active {
      #{$self}__header {
        border-bottom: none;
      }
      #{$self}__contents {
        height: 100%;
        max-height: 1200px;
        position: relative;
        right: auto;
        // transition: max-height 1s ease-in-out;
        border-top: none;
        border-bottom: $border;
        overflow: visible;
      }

      #{$self}__toggler {
        top: 50%;
        transform: translateY(-50%);
        &:after {
          opacity: 0;
        }

        &:before {
          content: "";
          transform: translateY(-50%);
          border-top: 1px solid #7e7e7e;
          width: 12px;
        }
      }
    }
  }

  &--gray-active {
    &.is-active {
      background-color: #dedede;
      @include media-breakpoint-up($breakpoint) {
        background-color: transparent;
      }
      #{$self}__contents {
        background-color: #dedede;
        @include media-breakpoint-up($breakpoint) {
          background-color: transparent;
        }
      }
    }
  }

  .card-plain {
    padding: 0 ($spacing / 2);
    @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
      margin-top: -15px;
    }
    &__container {
      @include media-breakpoint-up($toggling-container-breakpoint-desktop) {
        margin-top: 15px;
      }
      &:first-child {
        border-top: none;
      }
    }
    .row {
      margin: 0;
    }
  }
}
