@use "src/styles/variables" as *;

.vm-legend {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: default;
  width: 100%;

  &-group {
    min-width: 23%;
    width: 100%;
    margin: 0 $padding-global $padding-global 0;

    &-header {
      display: grid;
      align-items: center;
      gap: $padding-small;
      margin-bottom: 1px;
      border-bottom: $border-divider;
      font-size: $font-size-small;
      padding: $padding-small;

      &-title {
        display: flex;
        align-items: center;
        gap: $padding-small;
        color: $color-text-secondary;

        b {
          color: $color-text;
        }
      }

      &__warning {
        flex-grow: 1;
        text-align: right;
        padding-right: calc($padding-large * 2);
        font-size: $font-size-small;
        color: $color-warning;
      }

      &-labels {
        display: flex;
        flex-wrap: wrap;
        gap: $padding-small;
        color: $color-text-secondary;

        &__item {
          color: $color-text;
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }

          &:not(:last-child):after {
              content: ",";
          }
        }
      }
    }
  }
}
