html {
  &[data-theme="light"] {
    .container.contribute {
      .our-project {
        background-image: url("/images/contribute/our-project-light.svg");
      }
    }
  }
}

.container {
  &.contribute {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 5.25rem;

    .our-project {
      width: 90%;
      padding: 5.25rem 3.75rem 5.625rem 48%;
      border: 0.25rem dashed var(--background-color-primary);
      border-radius: 1.125rem;
      background-image: url("/images/contribute/our-project.svg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: var(--background-color-secondary);
      line-height: 1.8;

      h2 {
        margin-bottom: 1em;
      }
    }

    .steps {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 90%;
      gap: 1.5rem;
      text-align: center;

      .row {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        overflow: hidden;
        gap: 1.125rem;

        .item {
          display: flex;
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0;
          flex-direction: column;
          gap: 1.125rem;
        }

        .box {
          display: flex;
          position: relative;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 10rem;
          padding: 2.25rem;
          gap: 1.125rem;
          border: 0.25rem dashed var(--background-color-primary);
          border-radius: 1.125rem;
          background-color: var(--background-color-secondary);

          &.step {
            min-height: 18rem;
          }

          .index {
            z-index: 1;
            position: absolute;
            top: 54%;
            left: 12%;
            transform: translate(-50%, -50%);
            color: var(--background-color-primary);
            font-weight: 900;
            font-size: 20rem;
            line-height: 1;
            opacity: 0.3;
            pointer-events: none;
          }

          .description {
            z-index: 2;
            position: relative;
            line-height: 1.8;
            text-align: center;

            a {
              color: var(--color);
              font-weight: 500;
              text-decoration: underline;
              text-decoration-style: solid;
              text-decoration-color: var(--color);
              text-underline-offset: 0.1875rem;
              transition: color 240ms var(--ease-fluid);

              &:focus,
              &:hover {
                color: var(--color-display);
              }
            }
          }

          svg {
            z-index: 2;
            position: relative;
            transition: stroke 840ms var(--ease-fluid);
          }
        }
      }
    }

    .color-palette {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 80%;
      gap: 2rem;

      .toggle-group {
        display: flex;
        position: relative;
        width: fit-content;
        max-width: 100%;
        margin: 0;
        padding: 0.375rem;
        overflow: auto hidden;
        gap: 0.5em;
        border-radius: 0.375rem;
        background-color: var(--background-color-secondary);

        .item {
          position: relative;

          button {
            z-index: 2;
            position: relative;
            border-radius: 0.375rem;
            background-color: transparent;
            transition:
              transform 240ms var(--ease-fluid),
              background-color 240ms var(--ease-fluid),
              color 240ms var(--ease-fluid);

            &:focus,
            &:hover,
            &.active {
              transform: none;
              background-color: transparent;
              color: var(--color);
            }
          }

          .highlighter {
            z-index: 1;
            position: absolute;
            inset: 0;
            border-radius: 0.375rem;
            background-color: var(--background-color-primary);
          }
        }
      }

      .table-wrapper {
        display: flex;
        position: relative;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow: auto hidden;
        border: 0.375rem solid var(--background-color-secondary);
        border-radius: 0.375rem;

        table {
          width: max-content;
          margin: 0;
          padding: 0;
          border: none;
          border-collapse: collapse;
          background-color: var(--background-color-secondary);
          color: inherit;
          text-align: left;

          th {
            color: var(--color-display);
          }

          tr {
            th,
            td {
              min-width: 13rem;
              padding: 0.75rem 1.125rem;
              border: none;

              &:first-child {
                min-width: 9rem;
              }

              .wrapper {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                font-size: var(--font-size-caption);
                line-height: 1;
              }
            }
          }

          tbody {
            tr {
              background-color: var(--background-color-primary);
              transition: background-color 240ms var(--ease-fluid);

              &:focus,
              &:hover {
                background-color: var(--background-color-secondary);
              }

              &:first-child {
                td {
                  &:first-child {
                    border-top-left-radius: 0.375rem;
                  }

                  &:last-child {
                    border-top-right-radius: 0.375rem;
                  }
                }
              }

              &:last-child {
                td {
                  &:first-child {
                    border-bottom-left-radius: 0.375rem;
                  }

                  &:last-child {
                    border-bottom-right-radius: 0.375rem;
                  }
                }
              }
            }
          }
        }
      }

      p {
        line-height: 1.8;
        text-align: center;
        text-wrap: balance;

        a {
          color: var(--color);
          font-weight: 500;
          text-decoration: underline;
          text-decoration-style: solid;
          text-decoration-color: var(--color);
          text-underline-offset: 0.1875rem;
          transition: color 240ms var(--ease-fluid);

          &:focus,
          &:hover {
            color: var(--color-display);
          }
        }
      }
    }

    .contributors {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 40rem;
      gap: 1.5rem;
      line-height: 1.8;
      text-align: center;
      scroll-margin-top: 12rem;

      h3 {
        em {
          color: var(--color);
          font-style: normal;
          font-family: var(--font-mono);
        }
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        gap: 0.75rem;
        list-style: none;

        .item {
          display: flex;
          position: relative;
          align-items: center;
          padding: 0.125rem;
          gap: 0.75rem;
          border-radius: 100%;
          transition: background-color 240ms var(--ease-sharp);

          &:focus,
          &:hover {
            background-color: var(--background-color-tertiary);

            .avatar {
              img {
                filter: grayscale(100%);
              }
            }
          }

          .avatar {
            position: relative;
            width: 1.875rem;
            height: 1.875rem;
            overflow: hidden;
            border-radius: 100%;
            background-color: var(--background-color-primary);
            pointer-events: none;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              transition: filter 240ms var(--ease-fluid);
            }
          }
        }
      }
    }

    @media (max-width: 60rem) {
      gap: 4.125rem;

      .our-project {
        width: 100%;
        padding: 1.875rem 1.5rem;
        background-position: left center;
      }

      .steps {
        .row {
          flex-direction: column;
        }
      }

      .color-palette {
        width: 100%;
        max-width: 100%;

        .table-wrapper {
          width: 100%;
        }
      }

      .contributors {
        width: 100%;
        max-width: 100%;
      }
    }
  }
}
