.Legends {
    font-size: $small-font;
    margin-top: $spacing;
}

.Legends--horizontal {
    @include medium-large {
        display: grid;
        grid-gap: $spacing;
    }
    @include medium {
        grid-template-columns: 1fr 1fr;
    }
    @include large {
        // fit in as many columns as possible as long as they're wider than 150px
        grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    }
    &.Legends--withFrame {
        @include small {
            padding: $spacing/2;
        }
        @include medium-large {
            padding: $spacing $spacing * 1.5;
        }
    }
}

.Legends--vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @include small {
        margin-top: $spacing;
        border: 1px solid $dark-border-color;
        padding: $spacing;
    }
    @include medium {
    }
}

.Legends--withFrame {
    border: $border2;
    padding: $spacing;
}

.Legends--vertical.Legends--withFrame {
    padding: $spacing;
}

.Legends__Item {
    display: flex;
    align-items: center;
    // cursor: pointer;
    flex: 1;
    @include small{
        margin-bottom: $spacing/2;
    }
    &.Legends__Item--withKeyLabel {
        @include small {
            display: block;
            margin-bottom: $spacing/2;
        }
    }
    .Legends--vertical & {
        margin-bottom: $spacing/2;
    }
    &:last-child {
        margin-bottom: 0;
    }
}

.Legends__Item:hover {
    // background: rgba(255, 255, 255, 0.15);
}

.Legends__Item__Chip {
    display: block;
    margin-right: 12px;
    flex-shrink: 0;
}

.Legends__Item__KeyLabel {
    width: 120px;
    @include font-bold;
}
// .Legends--connections {
//     padding: $spacing / 2;
//     display: grid;
//     grid-template-columns: 1fr 1fr 1fr;
// }

// .Legends--connections .Legends__Item {
//     padding: $spacing / 2;
// }

.Legends__Item__Label{
    @include small{
        flex: 1;
    }
}
.Legends__Item__Value{
    display: inline-block;
    margin-left: $spacing/2;
    @include font-bold;
}