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

.vm-list {
  &-item {
    padding: 12px $padding-global;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 200ms ease;

    &_mobile {
      padding: $padding-global $padding-global;
    }

    &:hover,
    &_active {
      background-color: $color-hover-black;
    }

    &_multiselect {
      display: grid;
      grid-template-columns: 10px 1fr;
      gap: $padding-small;
      align-items: center;
      justify-content: flex-start;

      svg {
        animation: vm-scale 150ms cubic-bezier(0.280, 0.840, 0.420, 1);
      }

      .vm-list-item-inner {
        grid-column: 2;
      }

      &_selected {
        color: $color-primary;
      }
    }

    &_with-icon {
      display: grid;
      grid-template-columns: 14px 1fr;
      gap: calc($padding-small/2);
      align-items: center;
      justify-content: flex-start;
    }
  }
}
