.itsec-user-groups-list {
    display: grid;
    grid-template-columns: 200px minmax(0, auto);
    grid-gap: 1.25em;
    padding-bottom: 2em;

    & > .components-tab-panel__tabs {
        display: flex;
        flex-direction: column;
        margin-top: 2.2em; // Matches .itsec-manage-user-group__label
    }
}

.itsec-user-groups-list__item {
    padding: 1em .5em;
    margin: 1.25em 0 0;
    border: 1px solid $dark-gray-200;
    border-radius: 4px;
    text-align: left;
    height: auto;

    &.is-active {
        border-color: $blue-medium-focus;
        box-shadow: 0 0 0 1px $blue-medium-focus;
        outline: 2px solid transparent;
    }

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.itsec-user-groups-list__item--new {
    justify-content: center;
    align-items: center;

    & .dashicon {
        margin-right: 10px;
    }
}

.components-button.itsec-add-new-user-group-link {
    color: $main-blue;
    display: flex;
    align-items: center;
    text-decoration: none;

    &:before {
        @include dashicon("\f543", 10px);
        margin-right: 2px;
    }
}

.itsec-user-groups-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min-content, 250px));
    grid-gap: 1rem;
}