Checklist.scss

@mixin icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
}

.checklist {
    display: flex;
    flex-direction: column;
    margin-top: 2.4rem;

    @include mobile-or-tablet-screen {
        width: 100%;
    }

    & span {
        max-width: 80%;
    }

    &__item {
        padding: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px -1px 0px 0px #f2f3f4 inset;
        width: 41rem;

        @include mobile-or-tablet-screen {
            width: 100%;
        }

        &-button {
            @include icon-wrapper;

            padding: 0;

            &--disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            &--done {
                cursor: default;
                background-color: #4bb4b3 !important;
            }

            &-icon {
                fill: #fff;
            }
        }

        &-checkmark {
            @include icon-wrapper;

            &-icon {
                fill: #fff;
            }
        }

        &-text {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
    }
}