.map-settings {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  max-width: 60rem;

  .form {
    margin-top: 2rem;
    width: 100%;
    max-width: 30rem;
  }

  h2 {
    border-bottom: 1px solid var(--base0);
    margin-bottom: 1rem;
    padding: 0.5rem;
    width: 100%;
  }

  .map-users {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;

    .user {
      flex: 1 0 20rem;

      img {
        display: block;
        width: 100%;
      }

      .alt {
        width: 2.5rem;
        height: 2.5rem;
      }

      .details {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
      }
    }

    .levels {
      .level {
        display: block;
        width: 4rem;
        height: 4rem;
        text-align: center;
        transition: background 0.3s ease, color 0.3s ease;
        padding: 1.5rem 0;
        cursor: pointer;
      }

      input[type=radio] {
        display: none;
      }

      input[type=radio]:checked + .level {
        background: var(--base03);
        color: var(--base3);
      }
    }

    .delete {
      display: block;
      margin-left: 3rem;
      width: 4rem;
      height: 4rem;
      padding: 1.5rem 0;
      text-align: center;
      transition: background 0.3s ease;

      &:hover {
        background: var(--color3);
        color: var(--base3);
      }
    }
  }
}