.design {
  display: flex;
  flex: 1;

  & .design-content {
    flex: 1;
    overflow: auto;
    padding: 1rem;
  }

  & section {
    align-items: flex-start;
    display: flex;
    gap: 4rem;
  }

  & .design-legend {
    margin: 1rem 0;

    & thead th {
      background-color: transparent;
      border-color: transparent;
      color: black;
      font-weight: bold;
      text-align: left;
    }

    & th {
      border-color: transparent;
      color: var(--dark-gray);
      font-weight: normal;
      text-align: right;
    }

    & td {
      border-color: transparent;
    }
  }

  & ul {
    margin-bottom: 2rem;
  }

  & .design-icon-list {
    padding-left: 0;

    & li {
      align-items: center;
      display: flex;
      gap: 0.5rem;
      padding: 0.25rem 0;
    }

    & ::marker {
      font-size: 0;
    }

    & svg {
      font-size: 1.125rem;
    }

    & .name {
      background-color: var(--gray-100);
      border-radius: 2px;
      padding: 0 0.25rem;
    }

    & .style {
      font-size: 0.875rem;
    }
  }

  & .code-example {
    margin: 1rem 0;
    width: 100%;
  }
}