.container {
  display: flex;
  align-items: center;
  gap: 8px;
}

button.button {
  transition: none;
  position: relative;
  &.active {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    &::before {
      color: var(--white);
      font-weight: var(--font-weight-bold);
    }
    &:hover {
      background-color: var(--dark-blue);
    }
    &:active,
    &:focus {
      box-shadow: none;
    }
  }
  &::before {
    color: var(--dark-purple);
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .buttonContent {
    display: none;
  }
}

.navIcon {
  svg path,
  svg polygon {
    fill: var(--dark-purple);
    stroke: var(--dark-purple);
    stroke-width: 10px;
  }
  &.left {
    transform: rotate(-90deg);
  }
  &.right {
    transform: rotate(90deg);
  }
  &.disabled {
    border-color: var(--light-gray);
    color: var(--medium-gray);
    svg path,
    svg polygon {
      opacity: 0.4;
      fill: var(--purple);
    }
  }
}