.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  & > * {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-1 {
  flex: 1;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.ml-1 {
  margin-left: 1rem;
}
.mt-1 {
  margin-top: 1rem;
}

.pl-0 {
  padding-left: 0;
}
.mt-2 {
  margin-top: 2rem;
}
.gap-1 {
  gap: 1rem;
}

/**
 * 简单的提示信息实现
 * - 核心属性 [data-tip]=xxx, 默认显示正上方
 * - 更改显示位置: tip-bottom tip-right tip-bottom-left
 */
[data-tip] {
    /** 默认提示信息显示在正上方 */
    position: relative;

    /** 默认显示在顶部 */
    --tip-pos-top: unset;
    --tip-pos-right: unset;
    --tip-pos-bottom: 100%;
    --tip-pos-left: 50%;

    /** 默认不显示 */
    --tip-pos-visibility: hidden;

    /** 默认背景色为主题色 */
    --tip-bg-color: var(--x-contrast-background);

    &:hover, &:active {
      --tip-pos-visibility: visible;
    }

    &::after,
    &::before {
      display: block;
      content: '';
      position: absolute;
      top: var(--tip-pos-top);
      right: var(--tip-pos-right);
      bottom: var(--tip-pos-bottom);
      left: var(--tip-pos-left);
      z-index: 9999;

      visibility: var(--tip-pos-visibility);
      transition: all .3s ease;

      background-color: var(--tip-bg-color);
    }

    &::after {
      content: attr(data-tip);
      padding: .5rem 1rem;
      transform: translateX(-50%) translateY(-.6rem);

      color: var(--x-contrast-inverse);
      font-size: .9em;
      white-space: nowrap;

      border-radius: .25rem;
    }

    /** 小三角 */
    &::before {
      transform: translateX(-50%) translateY(-.1rem);

      width: 0;
      height: 0;

      background-color: unset;
      border-left: .5rem solid transparent;
      border-right: .5rem solid transparent;
      border-top: .5rem solid var(--tip-bg-color);
      border-bottom: unset;
    }

    &.tip-bottom {
      --tip-pos-top: 100%;
      --tip-pos-left: 50%;
      --tip-pos-bottom: unset;
      --tip-pos-right: unset;

      &::before {
        border-bottom: .5rem solid var(--tip-bg-color);
        border-top: unset;
        transform: translateX(-50%) translateY(.1rem);
      }

      &::after {
        transform: translateX(-50%) translateY(.6rem);
      }
    }

    &.tip-right {
      --tip-pos-top: 50%;
      --tip-pos-left: 100%;
      --tip-pos-bottom: unset;
      --tip-pos-right: unset;

      &::before {
        border-left: unset;
        border-right: .5rem solid var(--tip-bg-color);
        border-top: .5rem solid transparent;
        border-bottom: .5rem solid transparent;

        transform: translateX(.1rem) translateY(-50%);
      }

      &::after {
        transform: translateX(.6rem) translateY(-50%);
      }
    }

    &.tip-bottom-left {
      --tip-pos-top: 100%;
      --tip-pos-left: unset;
      --tip-pos-bottom: unset;
      --tip-pos-right: 0;

      &::before {
        border-bottom: .5rem solid var(--tip-bg-color);
        border-top: unset;
        transform: translateX(-50%) translateY(.1rem);
      }

      &::after {
        transform: translateX(0) translateY(.6rem);
      }
    }
  }

  /** button */
  button {
    all: unset;
    padding: .5rem 1rem;
    border: 1px solid currentColor;
    border-radius: .25rem;
  }