.secondary-label-button-animation {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.secondary-label-button-animation > * {
    transition: all 0.3s ease-out;
    transition-property: transform, opacity;
    overflow: hidden;
    width: 100%;
    display: block;
    word-break: keep-all;
}

.secondary-label-button-animation .button-label--main  {
    transform: translateY(0%) rotateX(0deg);
}

.secondary-label-button-animation .button-label--secondary {
    position: absolute;
    left: 0;
    min-width: max-content;
    z-index: 1;
    transform: translateY(100%) rotateX(45deg);
    opacity: 0.5;
}

a:hover .secondary-label-button-animation .button-label--secondary {
    transform: translateY(0%) rotateX(0deg);;
    position: relative;
    min-width: fit-content;
    opacity: 1;
}

a:hover .secondary-label-button-animation .button-label--main {
    transform: translateY(-100%) rotateX(-45deg);
    position: absolute;
    opacity: 0.5;
}