.collapse {
  display: grid;
  grid-template-rows: max-content 0fr;

  &.collapse--open {
    grid-template-rows: max-content 1fr;

    & > .collapse__header {
      & .collapse__toggle {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      & .collapse__checks-label {
        color: var(--brand-primary-blue-700-main);
      }

      & .collapse__toggle-icon {
        transform: rotate(180deg);

        & .icon {
          background-color: var(--brand-primary-blue-700-main);
        }
      }
    }
  }

  & & {
    margin-top: 24px;
  }
}

.collapse__header > .collapse__toggle > .checks-host {
  display: flex;
  align-items: center;
}

.collapse__header--level1 .collapse__toggle {
  border-radius: 12px;
  padding: 16px 20px 16px 16px;

  @media (min-width: 1024px) {
    border-radius: 16px;
    padding: 24px 28px 24px 24px;
  }
}

.collapse__header--level2 .collapse__toggle {
  border-radius: 8px;
  padding: 12px 16px 12px 12px;

  @media (min-width: 1024px) {
    border-radius: 12px;
    padding: 16px 20px 16px 16px;
  }
}

.collapse__toggle {
  width: 100%;
  height: 100%;
  appearance: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--Brand-Gray-800);
  background-color: var(--Brand-Gray-25);
  border: 1px solid var(--Brand-Gray-300);
  outline: none;
  text-align: left;

  &:focus-visible {
    /* outline-border-2px-blue-focused */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Primary-Blue-500);
  }
}

.collapse__toggle-icon {
  transition: transform var(--transition-duration)
    var(--transition-timing-function);

  & .icon {
    background-color: var(--Brand-Gray-800);
    transition: background-color var(--transition-duration)
      var(--transition-timing-function);
  }

  & .icon--chevron-down20 {
    display: block;
  }
  & .icon--chevron-down24 {
    display: none;
  }

  @media (min-width: 1024px) {
    & .icon--chevron-down20 {
      display: none;
    }
    & .icon--chevron-down24 {
      display: block;
    }
  }
}

.collapse__bottom-wrapper {
  overflow: hidden;
}

.collapse__bottom {
  background-color: var(--brand-bw-white);
  border: 1px solid var(--Brand-Gray-300);
  border-top: 0;
}

.collapse__bottom--level1 {
  padding: 24px 16px 16px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;

  @media (min-width: 1024px) {
    padding: 32px 24px 24px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  & > .collapse__title {
    padding-bottom: 12px;
  }
}

.collapse__bottom--level2 {
  padding: 16px 12px 12px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;

  @media (min-width: 1024px) {
    padding: 24px 16px 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  & > .collapse__title {
    padding-bottom: 8px;
  }
}