.menu#menu
  %input.menu__trigger.menu__trigger_main#trigger-main(type="radio" name="trigger" checked)
  %label.menu__close(for="trigger-projects")
  %input.menu__trigger#trigger-contact(type="radio" name="trigger")
  .menu__item.menu__item_contact
    %label.menu__in(for="trigger-contact")
    %label.menu__out(for="trigger-main")
    %header.menu__header
      %h2.menu__title
        Contact
    .menu__container

  %input.menu__trigger#trigger-about(type="radio" name="trigger")
  .menu__item.menu__item_about
    %label.menu__in(for="trigger-about")
    %label.menu__out(for="trigger-main")
    %header.menu__header
      %h2.menu__title
        About
      .menu__container

  %input.menu__trigger#trigger-team(type="radio" name="trigger")
  .menu__item.menu__item_team
    %label.menu__in(for="trigger-team")
    %label.menu__out(for="trigger-main")
    %header.menu__header
      %h2.menu__title
        Team
      .menu__container

  %input.menu__trigger#trigger-projects(type="radio" name="trigger")
  .menu__item.menu__item_projects
    %label.menu__in(for="trigger-projects")
    %label.menu__out(for="trigger-main")
    %header.menu__header
      %h2.menu__title
        Projects
      .menu__container
  .menu__bg

@use postcss-nested;

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: #1c182f;
  font: 14px/1.2 'Open Sans', helvetica, sans-serif;
}

.menu {
  height: 480px;
  width: 280px;
  border-radius: 6px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  &__bg {
    transition: opacity .2s ease-in-out;
    background: #cddbee;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
  
  &__inner {
    background: #cddbee;
    height: 100%;
    width: 100%;
    border-radius: 6px;
  }

  &__trigger {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    &:checked {
      & ~ .menu__close {
        opacity: 1;
        transform: rotate(0) translate(0, 0);
      }
      & ~ .menu__bg {
        opacity: 1;
      }
      & ~ .menu__item {
        &_contact {
          transform: translate(7%, 12.5%);
        }
        &_about {
          transform: translate(14%, 25%);
        }
        &_team {
          transform: translate(21%, 37.5%);
        }
        &_projects {
          transform: translate(28%, 50%);
        }
      }
      &:not(.menu__trigger_main) {
        & ~ .menu__bg {
          opacity: 0;
        }
        & ~ .menu__item {
          &_contact {
            transform: translate(100%, 12.5%);
          }
          &_about {
            transform: translate(100%, 25%);
          }
          &_team {
            transform: translate(100%, 37.5%);
          }
          &_projects {
            transform: translate(100%, 50%);
          }
        }
        & + .menu__item {
          transform: translate(0, 0);
          .menu__header {
            padding-left: 60px;
          }
          .menu__container {
            opacity: 1;
            transform: translateY(0);
          }
          .menu__in {
            width: 0;
            height: 0;
          }
          .menu__out {
            opacity: 1;
            pointer-events: all;
          }
        }
      }
    }
  }

  &__item {
    transition: transform .2s ease-in-out;
    position: absolute;
    padding-bottom: 20px;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    &_contact {
      background: #563761;
      color: #f3825f;
      z-index: 5;
    }
    &_about {
      background: #a7425c;
      color: #ffe26f;
      z-index: 10;
    }
    &_team {
      background: #f3825f;
      color: #563761;
      z-index: 15;
    }
    &_projects {
      background: #ffe26f;
      color: #a7425c;
      z-index: 20;
    }
  }
  
  &__header {
    transition: padding .2s ease-in-out;
    padding: 20px 7%;
    height: 56px;
  }
  
  &__title {
    text-transform: uppercase;
    font-weight: 500;
  }
  
  &__container {
    transition: all .2s ease-in-out;
    opacity: 0;
    padding: 0 20px;
    transform: translateY(20px);
    overflow: auto;
    max-height: calc(100% - 56px);
  }
  
  &__close {
    transition: all .2s linear;
    z-index: 2;
    opacity: 0;
    transform: rotate(90deg) translate(20px, 20px);
    height: 20px;
    width: 20px;
    top: 20px;
    left: 20px;
    cursor: pointer;
    position: absolute;
    overflow: hidden;
    &:before,
    &:after {
      content: '';
      position: absolute;
      height: 2px;
      width: 20px;
      margin: -1px 0 0 -10px;
      top: 50%;
      left: 50%;
      background: #7097B0;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
  
  &__in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }
  
  &__out {
    transition: opacity .2s linear;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    width: 20px;
    height: 16px;
    top: 20px;
    left: 20px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    z-index: 2;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 100%;
      height: 2px;
      background: currentColor;
    }
  }
}

/**
Pure css implementation of the concept:
https://dribbble.com/shots/2389505-Cards-Menu-Concept
**/