@use "variables" as *;

.variant--title__wrapper {
    h2 {
        margin: 0;
        font-size: $font-size-lmd;
        font-weight: $font-weight-bold;
    }

    .variant-name dot-icon {
        display: inline;
        color: $color-palette-primary;
    }
}

.variant--row__wrapper {
    min-height: 2.2rem;

    .separator {
        color: $color-palette-gray-300;
    }

    button {
        min-width: 55px;
    }
}

:host ::ng-deep {
    dot-icon {
        color: $color-palette-gray-500;

        &.isDone {
            color: $color-accessible-text-green;
        }
    }

    p-card {
        .p-card p-card {
            .p-card {
                border-radius: 0;
                border-bottom: none;
            }

            &.first .p-card {
                border-top-right-radius: $border-radius-sm;
                border-top-left-radius: $border-radius-sm;
            }

            &.last .p-card {
                border-bottom-right-radius: $border-radius-sm;
                border-bottom-left-radius: $border-radius-sm;
                border: 1px solid $color-palette-gray-300;
            }
        }
    }
}
