/*
  @project: monepi/administrateur
  @update: 18 Oct 2020
  @description: Tunnel stylesheet
                This is skeleton of all views to create epi, accounts, ...
*/

/* ----------------------------------------------------------------------------- == SUMMARY */
/*
  1. Tunnel
    1.1. Tunnel-resume
      1.1.a orange
      1.1.b blue
      1.1.1. Tunnel-resume-title
      1.1.2. Tunnel-resume-content
    1.2. Tunnel-CTAs
    1.3. Step
      1.3.a. is-completed
      1.3.b. is-folded
      1.3.1. Step-header
        1.3.1.1. Step-header-order
        1.3.1.2. Step-header-name
        1.3.1.3. Step-header-foldIcon
      1.3.2. Step-description
      1.3.3. Step-body
      1.3.4. Step-form
        1.3.4.a grey
        1.3.4.b blue
*/

/* ----------------------------------------------------------------------------- == Tunnel */
.Tunnel {
  margin: 26px auto;
}

/* ----------------------------------------------------------------------------- == Tunnel-resume */
.Tunnel-resume {
  border-radius: 10px;
  padding: 46px 25px 36px 25px;
  margin-bottom: 10px;
}

.Tunnel-resume.orange {
  background-color: var(--orange-400);
  color: var(--white);
}

.Tunnel-resume.blue {
  background-color: var(--blue-400);
  color: var(--white);
}

.Tunnel-resume-content {
  margin: 0 10px;
}

/* ----------------------------------------------------------------------------- == Tunnel-CTAs */
.Tunnel-CTAs {
  flex: 1;
  margin-bottom: 26px;
}

/* ----------------------------------------------------------------------------- == Step */
@keyframes scaleDown {
  from {
    opacity: 0;
            transform: scale(2.5);
  }
  to {
    opacity: 1;
            transform: scale(1);
  }
}

.Steps {
  flex: 1;
}

.Step.is-completed .Step-header {
  cursor: pointer;
}

.Step.is-completed .Step-header-order:after {
  animation: scaleDown 350ms var(--ease-out) both;
  background-image: url(../../images/icon-completed-white.svg);
  background-color: var(--grey-500);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.Step.is-completed .Step-header-order.orange:after {
  background-color: var(--orange-500);
}
.Step.is-completed .Step-header-order.blue:after {
  background-color: var(--blue-500);
}

.Step.is-folded .Step-foldableContent {
  margin-top: -2rem;
  max-height: 0 !important;
  transition-duration: 400ms;
}

.Step-foldableContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: max-height 800ms var(--ease-in);
}

.Step.is-folded .Step-header-name {
  color: var(--grey-500);
}

.Step.is-folded .Step-header-order {
  background-color: var(--grey-500);
}

.Step.is-folded .Step-header-foldIcon {
  transform-origin: 50% 50%;
  transform: rotateZ(-90deg);
}

/* ----------------------------------------------------------------------------- == Step-header */
.Step-header {
  align-items: center;
  display: flex;
  margin-bottom: 2rem;
  user-select: none;
}

/* ----------------------------------------------------------------------------- == Step-header-order */
.Step-header-order {
  background-color: var(--grey-500);
  border-radius: 4px;
  color: var(--white);
  font-family: var(--font-breadcrumb), var(--font-family-sans-serif);
  font-size: 1.17rem;
  font-weight: 700;
  margin-right: 14px;
  overflow: hidden;
  padding: 3px 9px 4px 9px;
  position: relative;
  transition: background-color 300ms var(--ease-in);
}

/* ----------------------------------------------------------------------------- == Step-header-name */
.Step-header-name {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0;
  transition: color 300ms var(--ease-in);
}

/* ----------------------------------------------------------------------------- == Step-header-foldIcon */
.Step-header-foldIcon {
  height: 30px;
  fill: black;
  flex: 0 0 30px;
  transition: transform 300ms var(--ease-in);
}

/* ----------------------------------------------------------------------------- == Step-description */
.Step-description {
  color: var(--grey-600);
  margin: 0 20px 20px 40px;
}
/* ----------------------------------------------------------------------------- == Step-body */
.Step-body {
  color: var(--grey-600);
}

/* ----------------------------------------------------------------------------- == Step-form */
.Step-form {
  border-radius: 10px;
  padding: 20px 40px 30px 40px;
}

.Step-form.grey {
  background-color: #edece7;
}
.Step-form.blue {
  background-color: #ebeff0;
}