.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;
            }
        }
    }
}