@import "../../../sass/webpack_deps";

.in-detail {
  margin-bottom: $gutter;
  margin-left: auto;
  margin-right: auto;
  max-width: span(10 static);
}

.in-detail__heading {
  @include h1();

  @media (min-width: $min-960) {
    margin-bottom: 12rem;
  }
}

.in-detail__grid {
  @media (max-width: $max-960) {
    max-height: 100%;
  }

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 830px;
}

.in-detail__article {
  @media (max-width: $max-960) {
    border-bottom: 1px solid $color-gray;
    position: relative;
  }

  @media (min-width: $min-960) {
    display: inline-block;
    margin-bottom: #{gutter(static) * 2};
    margin-right: gutter(static);
    vertical-align: top;
    width: span(3 static);
  }
}

.in-detail__article-title {
  font-size: 2rem;
  font-weight: $font-weight-semibold;
  line-height: (24 / 20);

  label {
    @media (max-width: $max-960) {
      align-items: center;
      cursor: pointer;
      display: flex;
      height: 7.8rem;
      justify-content: space-between;
      width: 100%;
    }
  }
}

.in-detail__article-list {
  font-size: 1.6rem;
  line-height: (20 / 16);
  list-style: none;

  @media (max-width: $max-960) {
    display: none;
    padding-bottom: 7.2rem;
    padding-left: gutter(static);
    padding-right: gutter(static);
  }

  .in-detail__toggle-control:checked ~ & {
    @media (max-width: $max-960) {
      display: block;
    }
  }
}

.in-detail__article-list-item {
  margin-bottom: 1em;
  margin-top: 1em;
}

.in-detail__button,
.in-detail__toggle-control {
  @media (max-width: $max-960) {
    appearance: none;
    border: 0;
    height: 3rem;
    position: absolute;
    right: 0;
    top: 2.4rem;
    width: 3rem;
  }

  @media (min-width: $min-960) {
    display: none;
  }

  &:checked {
    background-color: transparent;
  }
}

.in-detail__toggle-control {
  @media (max-width: $max-960) {
    cursor: pointer;
    z-index: z("default");
  }
}

.in-detail__button {
  @media (max-width: $max-960) {
    align-items: center;
    background-color: $color-white;
    border-radius: 50%;
    box-shadow: rgba($color-black, .16) 0 0 .4rem;
    color: $lpblue;
    display: inline-flex;
    font-size: .9rem;
    justify-content: center;
    line-height: 1;
  }

  @media (min-width: $min-960) {
    display: none;
  }
}

.in-detail__button-icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  line-height: 1;
  transform: translateY(1px) rotate(0);
  vertical-align: middle;
  width: 1em;
}

.in-detail__toggle-control:checked ~ .in-detail__button .in-detail__button-icon {
  transform: translateY(-1px) rotate(180deg);
}