lbry.tech/sass/partials/_ecosystem.scss

.ecosystem {
  margin-bottom: 2rem; padding-top: 1rem;

  display: grid;
  font-size: 1rem;
  grid-gap: 1rem;

  &:not(.expand-left):not(.expand-right) {
    grid-template-columns: 144px auto 144px;

    .ecosystem__submodules {
      padding-top: 2.5rem;
    }
  }

  &.expand-left {
    grid-template-columns: 50% auto;

    .ecosystem__submodules:last-of-type,
    .ecosystem__submodule:not(.active) {
      display: none;
    }

    .ecosystem__submodules:first-of-type { // TODO: Figure out how to write this in a way that doesn't override
      @media (min-resolution: 96dpi) {
        height: 383px;
      }

      @media (min-resolution: 192dpi) {
        height: 378px;
      }
    }
  }

  &.expand-right {
    grid-template-columns: auto 50%;

    .ecosystem__submodules:first-of-type,
    .ecosystem__submodule:not(.active) {
      display: none;
    }

    .ecosystem__submodules:last-of-type {
      @media (min-resolution: 96dpi) {
        height: 383px;
      }

      @media (min-resolution: 192dpi) {
        height: 378px;
      }
    }
  }
}



.ecosystem__module {
  position: relative;
  width: 100%;

  > * {
    z-index: 1;
  }

  h2 {
    position: relative;
    width: 100%;

    > div {
      float: right;
      font-size: 1rem;
      padding-top: 1.95rem;
      padding-right: 3rem;
      position: relative;
      text-align: right;

      &::before {
        @include font-serif;
        top: 0.9rem; right: 3rem;

        content: "explore";
        font-size: 80%;
        font-style: italic;
        opacity: 0.3;
        position: absolute;
        text-align: right;
        width: 100%;
      }

      span {
        cursor: pointer;
        display: inline-block;
        position: relative;

        &:not(:last-of-type) {
          margin-right: 1rem;

          &::after {
            top: 0; right: -0.7rem;

            color: rgba($gray, 0.3);
            content: "/";
            font-style: italic;
            position: absolute;
          }
        }
      }
    }
  }

  h3 {
    position: relative;
  }

  &::before {
    width: 100%; height: 100%;
    top: 0; left: 0;

    content: "";
    position: absolute;
    z-index: 0;
  }

  &:not(.active) {
    @include center;

    h2 {
      font-size: 1.5rem;
      text-align: center;

      > span {
        cursor: pointer;
        display: block;
        padding: 1.9rem 2rem;

        em {
          display: block;
          font-size: 70%;
          font-weight: normal;
        }
      }

      > div {
        display: none;
      }
    }

    .ecosystem__module__details {
      display: none;
    }

    .__close {
      top: 2rem;
      transform: rotate(45deg);
      z-index: 0;
    }
  }

  &.active {
    padding: 1.9rem 2rem;

    h2 {
      font-size: 3rem;
      margin-bottom: 1rem;

      > span {
        cursor: default;

        em {
          display: none;
        }
      }
    }

    &::before {
      background-color: $white;
    }

    .__close {
      top: 2.35rem;
      z-index: 3;
    }
  }



  &.lbrycrd,
  &.lbry {
    margin-bottom: 1rem;
  }

  &.lbry,
  &.applications {
    &:not(.active) {
      h2 {
        margin-bottom: 0.5rem;

        &::after {
          bottom: 1rem; left: 0;

          font-size: 0.5rem;
          letter-spacing: 0.1rem;
          position: absolute;
          width: 100%;
          z-index: -1;
        }
      }
    }
  }



  &.lbrycrd {
    &:not(.active)::before {
      background-color: $red;
    }

    &.active::before {
      border: 2px solid $red;
    }
  }

  &.lbry {
    &:not(.active) {
      &::before {
        background-color: $blue;
      }

      h2::after {
        content: "◼︎◼︎";
      }
    }

    &.active::before {
      border: 2px solid $blue;
    }
  }

  &.applications {
    &:not(.active) {
      &::before {
        background-color: $green;
      }

      h2::after {
        content: "◼︎◼︎◼︎◼︎◼︎";
      }
    }

    &.active::before {
      border: 2px solid $green;
    }
  }
}

.ecosystem__module__piece {
  background-color: $white;
  left: 10%;
  line-height: 2;
  position: relative;
  width: 80%;

  &:not(:last-of-type) {
    margin-bottom: 0.5rem;
  }
}



.ecosystem__submodule {
  border-width: 2px;
  cursor: default;
  position: relative;
  transition: border-color 0.2s;
  z-index: 2;

  &:not(:last-of-type) {
    margin-bottom: 1rem;
  }

  &:not(.on):not(.active) {
    color: rgba($black, 0.3);
  }

  &:not(.active) {
    @include center;
    width: 144px; height: 144px;

    border-radius: 50%;
    border-style: dashed;

    .ecosystem__submodule__title {
      width: 100%; height: 100%;

      line-height: 140px;
      text-align: center;
    }

    .ecosystem__submodule__description {
      display: none;
    }
  }

  &.active {
    width: 100%; height: 100%;

    border-style: solid;
    overflow-y: auto;
    padding: 2rem;

    .ecosystem__submodule__title {
      line-height: 1.33;
      margin-bottom: 1rem;
    }
  }

  &:not(.blue):not(.green):not(.red) {
    border-color: rgba($gray, 0.3);
  }

  &.blue,
  &.green,
  &.red {
    &:not(.active) {
      cursor: pointer;
    }
  }

  &.blue {
    background-color: rgba($blue, 0.025);
    border-color: $blue;
  }

  &.green {
    background-color: rgba($green, 0.025);
    border-color: $green;
  }

  &.red {
    background-color: rgba($red, 0.025);
    border-color: $red;
  }
}

.ecosystem__submodule__title {
  font-size: 1.15rem;
}

.ecosystem__submodule__description {
  margin-bottom: 2rem;

  .__close {
    top: -0.7rem; right: -2rem;
  }
}

.ecosystem__submodule__description__title {
  color: rgba($black, 0.3);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}



.__parents {
  top: 2rem; right: 4rem;

  font-size: 1.15rem;
  line-height: 1.33;
  list-style-type: none;
  padding-right: 1rem;
  position: absolute;
  z-index: 1;

  &::before,
  &::after {
    position: absolute;
  }

  &::before {
    @include font-serif;
    top: 0.3rem; left: -3.4rem;

    color: rgba($black, 0.3);
    content: "back to";
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 700;
  }

  &::after {
    width: 2px; height: 100%;
    top: 0; right: 0;

    background-color: rgba($black, 0.3);
    content: "";
  }
}

.__parent {
  font-weight: 700;

  &:not(.active) {
    display: none;
  }

  &.active {
    cursor: pointer;
  }
}

.__close {
  cursor: pointer;
  font-size: 2rem;
  position: absolute;
  right: 2rem;
  transition: all 0.2s;
}