<!-- 기본 테두리 -->
<div class="border">테두리</div>

<!-- 방향별 테두리 -->
<div class="border-top">상단 테두리</div>
<div class="border-right">우측 테두리</div>
<div class="border-bottom">하단 테두리</div>
<div class="border-left">좌측 테두리</div>

<!-- 테두리 없음 -->
<div class="border-none">테두리 없음</div>

@use 'podo-ui/mixin' as *;

.card {
  border: 1px solid color(border);
  border-radius: r(3);
  padding: s(5);
}

.divider {
  border-bottom: 1px solid color(border);
  margin: s(5) 0;
}

.customBorder {
  border: 2px solid color(primary);
  border-radius: r(4);
}

// 조건부 테두리
.item {
  &:not(:last-child) {
    border-bottom: 1px solid color(border);
  }
}

@use 'podo-ui/mixin' as *;

.primaryBorder {
  border: 2px solid color(primary);
}

.successBorder {
  border: 2px solid color(success);
}

.warningBorder {
  border: 2px solid color(warning);
}

.dangerBorder {
  border: 2px solid color(danger);
}