.ability-panel-container {
  border: var(--golder);
  background-image: url("/assets/images/texture.png");
  box-shadow: var(--shadow);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-row {
  display: flex;
  flex: 0 0 3rem;
  box-shadow: var(--shadow-bottom);
  border-radius: 10px;
  > * {
    flex: 1 1 0;
  }
  > :first-child {
    border-radius: 8px 0 0 0;
    border-right: 1px solid var(--border-color);
  }
  > :nth-child(2) {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }
  > :nth-child(3) {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }
  > :last-child {
    border-radius: 0 8px 0 0;
    border-left: 1px solid var(--border-color);
  }
}

.tab-button {
  height: 3rem;
  font-size: 1.375rem;
  font-weight: 600;
  color: black;
  border-bottom: solid 1px var(--border-color);
  border-right: 0;
  border-left: 0;
  border-top: 0;
  transition: all 0.25s ease-in-out;
  background-color: var(--tab);
  // box-shadow: var(--shadow-bottom);

  &.active {
    background-color: var(--tab-active);
    border-bottom: 3px solid var(--border-color);
  }
}

.footer {
  height: 5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-top);

  button {
    height: 3rem;
    width: 80%;
    border-radius: 10px;
    background: var(--accept);
    transition: background-color 0.2s ease-in-out;
    box-shadow: var(--shadow);

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

ability-table,
trait-table,
spellslots-table,
proficiencies-table {
  flex: 0 0 calc(100% - 3rem);
}