@import '../../../scss/styles';

@layer payload-default {
  .active-query-preset {
    &__label {
      display: flex;
      align-items: center;
    }

    &__label-text-max-width {
      max-width: 100px;
      overflow: hidden;
    }

    &__label-text {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    &__label-and-clear-wrap {
      display: flex;
      align-items: center;
    }

    &__shared {
      margin-right: 2px;
    }

    &__clear {
      display: flex;
      align-items: center;
      width: var(--pill-icon-size);
      height: var(--pill-icon-size);
    }

    &--active {
      box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
      background-color: var(--theme-elevation-0);
      padding-right: 4px;

      &:hover {
        background-color: var(--theme-elevation-100);
      }
    }
  }

  html[data-theme='dark'] {
    .active-query-preset {
      &--active {
        box-shadow: inset 0 0 0 1px var(--theme-elevation-300);
        color: var(--theme-elevation-0);
        background-color: var(--theme-elevation-800);

        &:hover {
          background-color: var(--theme-elevation-700);
        }
      }
    }
  }
}