@import "../helpers/colors.scss";

.catalog {
    .btn-wrapper {
        margin-top: 30px;
        background: $green;
        height: 75px;
        border: 1px solid #ededed;
        @include borderRadius(20px);

        h2 {
            color: #fff;
            position: relative;
            @include ver-center();
            i {
                color: #fff;
                font-size: 2rem;
                margin-right: 10px;
            }
        }
    }
    .col-md-4 {
        margin-bottom: 35px;
    }
    .groupCard {
        border: 1px solid #ededed;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        @include borderRadius(20px);
        margin: 0 auto;
        width: 100%;
        padding: 35px 5px 5px 5px;
        position: relative;
        overflow: hidden;
        position: relative;
        .editGroup {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 70px 70px 0 0;
            border-color: #e0e0e0 transparent transparent transparent;
            .img-wrapper {
                width: 20px;
                height: 20px;
                position: absolute;
                bottom: 35px;
                right: -30px;

                img {
                    width: 100%;
                    cursor: pointer;

                    &:hover {
                        opacity: 0.7;
                    }
                }
            }
        }
        .removeGroup {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 70px 70px 0;
            border-color: transparent #e0e0e0 transparent transparent;

            .img-wrapper {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 10px;
                left: 40px;

                img {
                    width: 100%;
                    cursor: pointer;
                }
            }
        }

        .img-wrapper {
            width: 100px;
            margin: 0 auto;

            img {
                width: 100%;
            }
        }

        p {
            color: $green;
            font-size: 2rem;
            @include boldFont();
        }

        a {
            background: $green;
            @include borderRadius(20px);
            color: #fff;
            padding: 10px 25px;
            font-size: 1.3rem;
            @include boldFont();
            line-height: 55px;
        }

        ul {
            li {
                &:nth-child(1) {
                    p {
                        font-size: 1.5rem;
                    }
                }

                &:nth-child(2) {
                    p {
                        color: $black;
                        font-size: 1.5rem;
                        margin-left: 35px;
                        margin-right: 20px;
                        position: relative;

                        &::before {
                            content: " ";
                            position: absolute;
                            background: url("../../img/icons/people.svg");
                            @include bg-props(contain, center, no-repeat);
                            width: 30px;
                            height: 30px;
                            left: -35px;
                            top: -10px;
                        }

                        &::after {
                            content: " ";
                            position: absolute;
                            width: 1px;
                            height: 20px;
                            background: #707070;
                            right: -14px;
                            top: 0;
                        }
                    }
                }

                a {
                    background: unset;
                    padding: unset;
                    color: $gray;
                    text-decoration: underline;
                }
            }
        }
    }
}