@import '../settings/abstract';

.iande-groups {

    .iande-group {
        border-bottom: 1px solid var(--iande-light-color);
        padding-bottom: 40px;
    }

    .iande-group-title {
        border-bottom: 1px solid var(--iande-medium-color);
        color: var(--iande-text-color);
        font-size: 1em;
        padding-bottom: 6px;
        text-align: center;
        text-transform: uppercase;
    }
}

// Group details
.iande-group {

    &__summary {

        h2 {
            color: var(--iande-secondary-color);
            font-size: 1.5em;
            font-weight: bold;
            margin: 0;

            &:before {
                border-radius: 50%;
                border-style: solid;
                border-width: 1px;
                content: '';
                display: inline-block;
                margin: 0.125em 0.35em 0.125em 0;
                min-height: 0.5em;
                min-width: 0.5em;
            }

            &.assigned-other:before {
                @extend %assigned-other;
            }

            &.assigned-self:before {
                @extend %assigned-self;
            }

            &.unassigned:before {
                @extend %unassigned;
            }
        }
    }


    &__summary-row {

        @media screen and (max-width: 900px) {
            align-items: flex-start;
            flex-direction: column;

            & > :nth-child(2) {
                width: 100%;
            }
        }
    }

    &__steps {
        align-items: center;
        display: flex;
        flex-wrap: wrap;

        & > * {
            margin: 0.5em 1em 0.5em 0;
        }
    }

    &__step {
        align-items: center;
        color: var(--iande-tertiary-color);
        display: flex;
        font-size: 0.75em;
        font-weight: bold;

        &-icon {
            color: var(--iande-medium-color);
            font-size: 2.5em;
            margin-right: 0.5ch;

            &.active {
                color: var(--iande-tertiary-color);
            }
        }

        label {

            [data-icon] {
                color: var(--iande-secondary-color);
            }
        }

        select {
            background-color: transparent;
            border: none;
            color: var(--iande-secondary-color);
            font-size: inherit;
            font-weight: inherit;
            max-width: 11em;
        }
    }

    &__details {
        padding: 20px;
    }

    &.boxed & {

        &__summary {
            background-color: var(--iande-lighter-color);
            border-radius: var(--iande-border-radius) var(--iande-border-radius) 0 0;

            &.collapsed {
                @media screen and (min-width: 601px) {
                    border-radius: var(--iande-border-radius);
                }
            }
        }

        &__details {
            background-color: var(--iande-lighter-color);

            @media screen and (min-width: 601px) {
                border-radius: 0 0 var(--iande-border-radius) var(--iande-border-radius);
            }
        }
    }

    .iande-modal & {

        &__summary {
            background-color: var(--iande-lighter-color);
        }
    }
}