.h-row {
    @apply
    md:h-[47px] md:border-0 md:rounded-none md:p-0 md:flex md:items-center
    w-full p-5 border-c-blue border rounded-c-radius relative
    grid gap-y-4
}

.h-row {
    grid-template-columns: 30px auto auto;
    grid-template-rows: auto;
    grid-template-areas:
        "akk name btns"
        "desc desc desc"
        "date date date"
    ;
}
.akk {grid-area: akk;}
.btns {grid-area: btns;}
.name {grid-area: name;}
.desc {grid-area: desc;}
.date {grid-area: date;}

.h-coll {
    @apply xl:px-[28px] md:bg-c-white h-full md:px-4 flex items-center font-medium text-sm
}

.h-coll.coll-h {
    @apply md:py-2.5 bg-c-blue-50 font-semibold
}


.stage-btn-1 + div { @apply rounded-l-full }
.stage-btn-3 + div { @apply rounded-r-full }

.stage-1 .stage-btn-1 { @apply text-c-blue }
.stage-1 .stage-bar-1 { @apply w-full rounded-full }

.stage-2 .stage-btn-1,
.stage-2 .stage-btn-2 { @apply text-c-blue }
.stage-2 .stage-bar-1 { @apply w-full rounded-none }
.stage-2 .stage-bar-2 { @apply w-full rounded-none rounded-r-full }

.stage-3 .stage-btn-1,
.stage-3 .stage-btn-2,
.stage-3 .stage-btn-3 { @apply text-c-blue }
.stage-3 .stage-bar-1,
.stage-3 .stage-bar-2,
.stage-3 .stage-bar-3 { @apply w-full rounded-none }


.scenario-textarea[disabled] + .transcript-btns .btn-edit { @apply flex }
.scenario-textarea[disabled] + .transcript-btns .btn-save { @apply hidden }

.scenario-textarea + .transcript-btns .btn-edit {  @apply hidden }
.scenario-textarea + .transcript-btns .btn-save {  @apply flex }


.btn-icon,
.btn-icon > .default-icon,
.btn-icon > .success-icon {
    @apply duration-200;
    perspective: 1000px;
}
.btn-icon > .default-icon {
    @apply opacity-100;
}
.btn-icon > .success-icon {
    @apply opacity-0;
    transform: rotateY(180deg);
}

.success {
    @apply !border-[#22c55e] !text-[#22c55e];
}
.success > .btn-icon {
    transform: rotateY(180deg);
}
.success > .btn-icon > .default-icon {
    @apply opacity-0
}
.success > .btn-icon > .success-icon {
    @apply opacity-100
}