.custom-tabs {
    display: block;
    height: auto;
    min-width: 320px;
    padding: 10px 0;
    width: 100%;
}

.block-editor-block-list__block.custom-tabs {
    padding: 0;
}

.custom-tabs__labels {
    align-items: center;
    align-self: start;
    display: flex;
    justify-content: center;
}

.block-editor-block-list__block .custom-tabs__labels {
    padding-bottom: 0;
}

.custom-tabs__labels button {
    background: transparent;
    border: none;
}

.custom-tabs__tab-label {
    align-items: center;
    border-bottom: 2px solid #CCC;
    color: #000;
    display: flex;
    flex-direction: column;
    height: 74px;
    justify-content: center;
    flex: 1 0 0;
    padding: 25px;
}

.custom-tabs__tab-label:hover {
    border-bottom-color: #00BBB4;
    color: #00BBB4;
}

.custom-tabs__tab-label.is-active {
    background-color: #00BBB4;
    border-bottom-color: #00BBB4;
    border-radius: 4px 4px 0 0;
    color: #FFF;
}

.custom-tabs__tab-content {
    animation: fade 0.3s ease-in-out;
    display: none;
    height: auto;
    min-height: 100px;
    padding: 0;
    width: 100%;
}

/* Show content of clicked tab. */
.custom-tabs__radio-group input[type="radio"]:nth-of-type(1):checked ~ .custom-tabs__labels + .custom-tabs__content > .custom-tabs__tab-content:nth-of-type(1),
.custom-tabs__radio-group input[type="radio"]:nth-of-type(2):checked ~ .custom-tabs__labels + .custom-tabs__content > .custom-tabs__tab-content:nth-of-type(2),
.custom-tabs__radio-group input[type="radio"]:nth-of-type(3):checked ~ .custom-tabs__labels + .custom-tabs__content > .custom-tabs__tab-content:nth-of-type(3),
.custom-tabs__radio-group input[type="radio"]:nth-of-type(4):checked ~ .custom-tabs__labels + .custom-tabs__content > .custom-tabs__tab-content:nth-of-type(4) {
    display: block;
}

/* Styles for active tab */
.custom-tabs__radio-group input[type="radio"]:nth-of-type(1):checked ~ .custom-tabs__labels label:nth-of-type(1),
.custom-tabs__radio-group input[type="radio"]:nth-of-type(2):checked ~ .custom-tabs__labels label:nth-of-type(2),
.custom-tabs__radio-group input[type="radio"]:nth-of-type(3):checked ~ .custom-tabs__labels label:nth-of-type(3),
.custom-tabs__radio-group input[type="radio"]:nth-of-type(4):checked ~ .custom-tabs__labels label:nth-of-type(4) {
    background-color: #00BBB4;
    border-bottom-color: #00BBB4;
    border-radius: 4px 4px 0 0;
    color: #FFF;
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
