/* src/components/HorizontalTabs.css */
.horizontal-tabs-nav {
  display: flex;
  list-style: none;
  border-bottom: 2px solid #eee;
  padding: 0;
  margin: 0 0 0 0;
  background: none;
}

  .horizontal-tabs-nav li {
    margin-right: 1px;
  }

  .horizontal-tabs-nav button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #232943;
    font: inherit;
    padding: 0.2rem 2rem 0.2rem 2rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
    transition: border-color 0.2s, color 0.2s;
  }

    .horizontal-tabs-nav button.active {
      border-bottom: 2px solid #d2d2d2;
      color: #232946;
      background: #f2f2f2;
    }

.horizontal-tabs-panel {
  padding: 2rem 0 0 0;
}

@media (max-width: 600px) {
  .horizontal-tabs-nav {
    flex-direction: column;
    border-bottom: none;
    border-right: 2px solid #eee;
  }

    .horizontal-tabs-nav li {
      margin-bottom: 2px;
      margin-right: 0;
    }

    .horizontal-tabs-nav button,
    .horizontal-tabs-nav button.active {
      border-bottom: none;
      border-right: 2px solid #f2f2f2;
      width: 100%;
      text-align: left;
      padding: 1rem 1rem 1rem 1.5rem;
    }

  .horizontal-tabs-panel {
    padding: 1.2rem 0 0 0;
  }
}