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

#content {
    &.gruppi {
        .btn-wrapper {
            background: $green;
            height: 75px;
            border: 1px solid #ededed;
            @include borderRadius(20px);

            h2 {
                color: #fff;
                position: relative;
                @include ver-center();
            }
        }
        .col-md-4 {
            margin-bottom: 35px;
        }
        .groups {
            .groupCard {
                border: 1px solid $lightGray;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
                @include borderRadius(20px);
                margin: 0 auto;
                width: 100%;
                padding: 35px 95px;
                position: relative;
                overflow: hidden;
                .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;
                    a {
                        background: none;
                        padding: 0;
                    }
                    .img-wrapper {
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        bottom: 5px;
                        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;
                    button {
                        width: 35px;
                    }
                    .img-wrapper {
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        top: 5px;
                        left: 30px;

                        img {
                            width: 100%;
                            cursor: pointer;

                            &:hover {
                                opacity: 0.7;
                            }
                        }
                    }
                }

                .img-wrapper {
                    width: 40px;
                    height: 40px;
                    margin: 0 auto 30px auto;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }

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

                    &.groupName {
                        margin-bottom: 20px;
                    }
                }

                a {
                    background: $green;
                    @include borderRadius(20px);
                    color: #fff;
                    font-size: 1.3rem;
                    @include boldFont();
                    padding: 5px 25px;
                }
            }
        }
    }
}
@media (max-width: 1440px) {
    #content {
        &.gruppi {
            .groups {
                .groupCard {
                    padding: 35px 0;
                }
            }
        }
    }
}