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

.vm-explore-alerts-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: $padding-global calc($padding-small + 10px);
  width: 100%;

  &_mobile {
    flex-direction: column;
    align-items: stretch;
  }

  &__rule_type {
    min-width: 120px;
  }

  &__state {
    min-width: 150px;
  }

  &-description {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: $padding-small;

    ul {
      list-style-position: inside;
    }

    button {
      color: inherit;
      min-height: 29px;
    }

    code {
      margin: 0 3px;
    }
  }

  &-search {
    flex-grow: 1;
    .vm-text-field__input {
      padding: 11px 28px;
    }
  }

  &__clear-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }
  }
}
