@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @for $i from 1 through 10 {
    .ellipsis-#{$i} {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-clamp: #{$i};
      -webkit-line-clamp: #{$i};
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
  }

  // 历遍生成4个方向的底部安全区
  @each $d in top, right, bottom, left {
    .safe-area-inset-#{$d} {
      padding-#{$d}: 0;
      padding-#{$d}: constant(safe-area-inset-#{$d});
      padding-#{$d}: env(safe-area-inset-#{$d});
    }
  }

  .shadow-card {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
  }

  .shadow-card-dark {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  }

  .border-bottom {
    border-bottom: 1px solid #E5E5E5;
  }

  .sibling-border-top {
    &+.sibling-border-top {
      border-top: 1px solid #E5E5E5;
    }
  }

  .sibling-border-bottom {
    &+.sibling-border-bottom {
      border-bottom: 1px solid #E5E5E5;
    }
  }
}

@layer base {}