.tabpanel {
  margin-top: 25px;
  margin-bottom: 25px;
  border: 1px solid $color-blue-dark;

  &__tablist {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__tab {
    padding: 5px;
    display: block;
    text-align: left;
    color: currentColor;

    &-text {
      border-left: 1px solid $color-black;
      padding-left: 10px;
      margin-left: 10px;
      display: inline-block;
    }

    .icon {
      height: 30px;
      width: 30px;
      vertical-align: middle;
      margin-left: 10px;
      fill: currentColor;
    }

    &.active {
      background-color: $color-blue-dark;
      color: $color-white;

      .icon {
        fill: currentColor;
      }

      .tabpanel__tab-text {
        border-left-color: $color-white;
        color: inherit;
      }

      &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid $color-blue-dark;
      }
    }
  }
}
