.xh-loading-indicator {
  --border-width: 1px;
  --height: 20px; // should match spinner height

  position: absolute;
  padding: var(--xh-pad-half-px);
  background-color: var(--xh-loading-indicator-bg);
  color: var(--xh-loading-indicator-color);
  border-color: var(--xh-loading-indicator-border-color);
  border-style: solid;
  border-width: 0;

  &--tl {
    top: 0;
    left: 0;
    border-bottom-width: var(--border-width);
    border-right-width: var(--border-width);
    border-radius: 0 0 4px 0;

    &.xh-loading-indicator--has-spinner {
      .xh-loading-indicator__message {
        margin-left: var(--xh-pad-px);
      }
    }
  }

  &--tr {
    top: 0;
    right: 0;
    border-bottom-width: var(--border-width);
    border-left-width: var(--border-width);
    border-radius: 0 0 0 4px;

    &.xh-loading-indicator--has-spinner {
      .xh-loading-indicator__message {
        margin-right: var(--xh-pad-px);
      }
    }
  }

  &--bl {
    bottom: 0;
    left: 0;
    border-top-width: var(--border-width);
    border-right-width: var(--border-width);
    border-radius: 0 4px 0 0;

    &.xh-loading-indicator--has-spinner {
      .xh-loading-indicator__message {
        margin-left: var(--xh-pad-px);
      }
    }
  }

  &--br {
    bottom: 0;
    right: 0;
    border-top-width: var(--border-width);
    border-left-width: var(--border-width);
    border-radius: 4px 0 0 0;

    &.xh-loading-indicator--has-spinner {
      .xh-loading-indicator__message {
        margin-right: var(--xh-pad-px);
      }
    }
  }

  .xh-hbox {
    flex: none;
    align-items: center;
    flex-wrap: nowrap;
  }

  .xh-spinner {
    color: var(--xh-loading-indicator-spinner-color);
  }

  &__message {
    height: var(--height);
    line-height: var(--height);
    align-items: center;
    white-space: nowrap;
  }
}

.xh-desktop .xh-loading-indicator {
  font-size: var(--xh-font-size-small-px);
}