.map-index {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 100%;
  max-width: 30rem;

  .index-header {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    border-bottom: 1px solid var(--base00);

    .title, .new {
      padding: 0.5rem;
    }
  }

  .index-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    font-size: 1.5rem;
    transition: color 0.3s ease, background-color 0.3s ease;
    background-color: var(--base2);
    margin-bottom: 0.5rem;

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

  .no-maps {
    padding: 2rem;
    text-align: center;
    background-color: var(--base2);
  }
}