@list-loading-height: 50px;
@list-finished-height: 50px;
@list-error-height: 50px;
@list-loading-color: #888;
@list-finished-color: #888;
@list-error-color: #888;
@list-loading-font-size: var(--font-size-md);
@list-finished-font-size: var(--font-size-md);
@list-error-font-size: var(--font-size-md);

:root {
  --list-loading-height: @list-loading-height;
  --list-finished-height: @list-finished-height;
  --list-error-height: @list-error-height;
  --list-loading-color: @list-loading-color;
  --list-finished-color: @list-finished-color;
  --list-error-color: @list-error-color;
  --list-loading-font-size: @list-loading-font-size;
  --list-finished-font-size: @list-finished-font-size;
  --list-error-font-size: @list-error-font-size;
}

.var-list {
  &__detector {
    width: 100%;
  }

  &__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--list-loading-height);
    font-size: var(--list-loading-font-size);
    color: var(--list-loading-color);
  }

  &__loading-text {
    margin-right: 10px;
  }

  &__finished {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--list-finished-height);
    font-size: var(--list-finished-font-size);
    color: var(--list-finished-color);
  }

  &__error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--list-error-height);
    font-size: var(--list-error-font-size);
    color: var(--list-error-color);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}