Tools Module For CSS Borders.

sircus-tools-border | v2.0.0

border

1px solid

.t-border
.t-borderTop
t-borderLeft
t-borderBottom
t-borderRight
<div class="t-border">...</div>
<div class="t-borderTop">...</div>
<div class="t-borderLeft">...</div>
<div class="t-borderBottom">...</div>
<div class="t-borderRight">...</div>

2px solid

.t-border2x
.t-borderTop2x
t-borderLeft2x
t-borderBottom2x
t-borderRight2x
<div class="t-border2x">...</div>
<div class="t-borderTop2x">...</div>
<div class="t-borderLeft2x">...</div>
<div class="t-borderBottom2x">...</div>
<div class="t-borderRight2x">...</div>

3px solid

.t-border3x
.t-borderTop3x
t-borderLeft3x
t-borderBottom3x
t-borderRight3x
<div class="t-border3x">...</div>
<div class="t-borderTop3x">...</div>
<div class="t-borderLeft3x">...</div>
<div class="t-borderBottom3x">...</div>
<div class="t-borderRight3x">...</div>

4px solid

.t-border4x
.t-borderTop4x
t-borderLeft4x
t-borderBottom4x
t-borderRight4x
<div class="t-border4x">...</div>
<div class="t-borderTop4x">...</div>
<div class="t-borderLeft4x">...</div>
<div class="t-borderBottom4x">...</div>
<div class="t-borderRight4x">...</div>

border-color

Primary

.t-border.t-borderPrimaryDark
.t-border.t-borderPrimary
t-border.t-borderPrimaryLight
<div class="t-border t-borderPrimaryDark">...</div>
<div class="t-border t-borderPrimary">...</div>
<div class="t-border t-borderPrimaryLight">...</div>

Secondary

.t-border.t-borderSecondaryDark
.t-border.t-borderSecondary
t-border.t-borderSecondaryLight
<div class="t-border t-borderSecondaryDark">...</div>
<div class="t-border t-borderSecondary">...</div>
<div class="t-border t-borderSecondaryLight">...</div>

Success

.t-border.t-borderSuccessDark
.t-border.t-borderSuccess
t-border.t-borderSuccessLight
<div class="t-border t-borderSuccessDark">...</div>
<div class="t-border t-borderSuccess">...</div>
<div class="t-border t-borderSuccessLight">...</div>

Notice

.t-border.t-borderNoticeDark
.t-border.t-borderNotice
t-border.t-borderNoticeLight
<div class="t-border t-borderNoticeDark">...</div>
<div class="t-border t-borderNotice">...</div>
<div class="t-border t-borderNoticeLight">...</div>

Warning

.t-border.t-borderWarningDark
.t-border.t-borderWarning
t-border.t-borderWarningLight
<div class="t-border t-borderWarningDark">...</div>
<div class="t-border t-borderWarning">...</div>
<div class="t-border t-borderWarningLight">...</div>

Error

.t-border.t-borderErrorDark
.t-border.t-borderError
t-border.t-borderErrorLight
<div class="t-border t-borderErrorDark">...</div>
<div class="t-border t-borderError">...</div>
<div class="t-border t-borderErrorLight">...</div>

border-radius

border-radius

.t-borderRadiusXs
.t-borderRadiusSm
t-borderRadiusMd
t-borderRadiusLg
t-borderRadiusXl
t-borderRadiusCircle
<div class="t-borderRadiusXs">...</div>
<div class="t-borderRadiusSm">...</div>
<div class="t-borderRadiusMd">...</div>
<div class="t-borderRadiusLg">...</div>
<div class="t-borderRadiusXl">...</div>
<div class="t-borderRadiusCircle" style="width:140px; height:140px;">...</div>

Install

npm install sircus-tools-border sircus-variables

CSS import

@import "sircus-tools-border";
@import "sircus-tools-border/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-border
 ================================================== */
.t-border         { border: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
.t-borderTop      { border-top: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
.t-borderLeft     { border-left: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
.t-borderBottom   { border-bottom: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
.t-borderRight    { border-right: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }

.t-border2x       { border: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
.t-borderTop2x    { border-top: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
.t-borderLeft2x   { border-left: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
.t-borderBottom2x { border-bottom: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
.t-borderRight2x  { border-right: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }

.t-border3x       { border: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
.t-borderTop3x    { border-top: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
.t-borderLeft3x   { border-left: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
.t-borderBottom3x { border-bottom: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
.t-borderRight3x  { border-right: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }

.t-border4x       { border: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
.t-borderTop4x    { border-top: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
.t-borderLeft4x   { border-left: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
.t-borderBottom4x { border-bottom: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
.t-borderRight4x  { border-right: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }

.t-border0        { border: 0 !important; }
.t-borderTop0     { border-top: 0 !important; }
.t-borderLeft0    { border-left: 0 !important; }
.t-borderBottom0  { border-bottom: 0 !important; }
.t-borderRight0   { border-right: 0 !important; }

.t-borderWhite          { border-color: #FFF !important; }
.t-borderBlack          { border-color: #000 !important; }

.t-borderGray90         { border-color: var(--gray-90) !important; }
.t-borderGray80         { border-color: var(--gray-80) !important; }
.t-borderGray60         { border-color: var(--gray-60) !important; }
.t-borderGray40         { border-color: var(--gray-40) !important; }
.t-borderGray30         { border-color: var(--gray-30) !important; }
.t-borderGray20         { border-color: var(--gray-20) !important; }
.t-borderGray10         { border-color: var(--gray-10) !important; }
.t-borderGray5          { border-color: var(--gray-5) !important; }

.t-borderPrimary        { border-color: var(--primary) !important; }
.t-borderPrimaryDark    { border-color: var(--primary-dark) !important; }
.t-borderPrimaryLight   { border-color: var(--primary-light) !important; }

.t-borderSecondary      { border-color: var(--secondary) !important; }
.t-borderSecondaryDark  { border-color: var(--secondary-dark) !important; }
.t-borderSecondaryLight { border-color: var(--secondary-light) !important; }

.t-borderSuccess        { border-color: var(--success) !important; }
.t-borderSuccessDark    { border-color: var(--success-dark) !important; }
.t-borderSuccessLight   { border-color: var(--success-light) !important; }

.t-borderNotice         { border-color: var(--notice) !important; }
.t-borderNoticeDark     { border-color: var(--notice-dark) !important; }
.t-borderNoticeLight    { border-color: var(--notice-light) !important; }

.t-borderWarning        { border-color: var(--warning) !important; }
.t-borderWarningDark    { border-color: var(--warning-dark) !important; }
.t-borderWarningLight   { border-color: var(--warning-light) !important; }

.t-borderError          { border-color: var(--error) !important; }
.t-borderErrorDark      { border-color: var(--error-dark) !important; }
.t-borderErrorLight     { border-color: var(--error-light) !important; }

.t-borderRadius         { border-radius: var(--borderRadius) !important; }
.t-borderRadiusXs       { border-radius: var(--borderRadius-xs) !important; }
.t-borderRadiusSm       { border-radius: var(--borderRadius-sm) !important; }
.t-borderRadiusMd       { border-radius: var(--borderRadius-md) !important; }
.t-borderRadiusLg       { border-radius: var(--borderRadius-lg) !important; }
.t-borderRadiusXl       { border-radius: var(--borderRadius-xl) !important; }
.t-borderRadiusCircle   { border-radius: 100% !important; }
.t-borderRadius0        { border-radius: 0 !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-border         { border: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderTop      { border-top: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderLeft     { border-left: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderBottom   { border-bottom: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderRight    { border-right: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }

  .t-sm-border2x       { border: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderTop2x    { border-top: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderLeft2x   { border-left: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderBottom2x { border-bottom: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderRight2x  { border-right: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }

  .t-sm-border3x       { border: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderTop3x    { border-top: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderLeft3x   { border-left: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderBottom3x { border-bottom: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderRight3x  { border-right: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }

  .t-sm-border4x       { border: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderTop4x    { border-top: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderLeft4x   { border-left: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderBottom4x { border-bottom: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-sm-borderRight4x  { border-right: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }

  .t-sm-border0        { border: 0 !important; }
  .t-sm-borderTop0     { border-top: 0 !important; }
  .t-sm-borderLeft0    { border-left: 0 !important; }
  .t-sm-borderBottom0  { border-bottom: 0 !important; }
  .t-sm-borderRight0   { border-right: 0 !important; }

  .t-sm-borderWhite          { border-color: #FFF !important; }
  .t-sm-borderBlack          { border-color: #000 !important; }

  .t-sm-borderGray90         { border-color: var(--gray-90) !important; }
  .t-sm-borderGray80         { border-color: var(--gray-80) !important; }
  .t-sm-borderGray60         { border-color: var(--gray-60) !important; }
  .t-sm-borderGray40         { border-color: var(--gray-40) !important; }
  .t-sm-borderGray30         { border-color: var(--gray-30) !important; }
  .t-sm-borderGray20         { border-color: var(--gray-20) !important; }
  .t-sm-borderGray10         { border-color: var(--gray-10) !important; }
  .t-sm-borderGray5          { border-color: var(--gray-5) !important; }

  .t-sm-borderPrimary        { border-color: var(--primary) !important; }
  .t-sm-borderPrimaryDark    { border-color: var(--primary-dark) !important; }
  .t-sm-borderPrimaryLight   { border-color: var(--primary-light) !important; }

  .t-sm-borderSecondary      { border-color: var(--secondary) !important; }
  .t-sm-borderSecondaryDark  { border-color: var(--secondary-dark) !important; }
  .t-sm-borderSecondaryLight { border-color: var(--secondary-light) !important; }

  .t-sm-borderSuccess        { border-color: var(--success) !important; }
  .t-sm-borderSuccessDark    { border-color: var(--success-dark) !important; }
  .t-sm-borderSuccessLight   { border-color: var(--success-light) !important; }

  .t-sm-borderNotice         { border-color: var(--notice) !important; }
  .t-sm-borderNoticeDark     { border-color: var(--notice-dark) !important; }
  .t-sm-borderNoticeLight    { border-color: var(--notice-light) !important; }

  .t-sm-borderWarning        { border-color: var(--warning) !important; }
  .t-sm-borderWarningDark    { border-color: var(--warning-dark) !important; }
  .t-sm-borderWarningLight   { border-color: var(--warning-light) !important; }

  .t-sm-borderError          { border-color: var(--error) !important; }
  .t-sm-borderErrorDark      { border-color: var(--error-dark) !important; }
  .t-sm-borderErrorLight     { border-color: var(--error-light) !important; }

  .t-sm-borderRadius         { border-radius: var(--borderRadius) !important; }
  .t-sm-borderRadiusXs       { border-radius: var(--borderRadius-xs) !important; }
  .t-sm-borderRadiusSm       { border-radius: var(--borderRadius-sm) !important; }
  .t-sm-borderRadiusMd       { border-radius: var(--borderRadius-md) !important; }
  .t-sm-borderRadiusLg       { border-radius: var(--borderRadius-lg) !important; }
  .t-sm-borderRadiusXl       { border-radius: var(--borderRadius-xl) !important; }
  .t-sm-borderRadiusCircle   { border-radius: 100% !important; }
  .t-sm-borderRadius0        { border-radius: 0 !important; }
}

@media (--viewport-md) {
  .t-md-border         { border: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderTop      { border-top: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderLeft     { border-left: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderBottom   { border-bottom: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderRight    { border-right: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }

  .t-md-border2x       { border: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderTop2x    { border-top: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderLeft2x   { border-left: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderBottom2x { border-bottom: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderRight2x  { border-right: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }

  .t-md-border3x       { border: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderTop3x    { border-top: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderLeft3x   { border-left: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderBottom3x { border-bottom: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderRight3x  { border-right: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }

  .t-md-border4x       { border: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderTop4x    { border-top: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderLeft4x   { border-left: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderBottom4x { border-bottom: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-md-borderRight4x  { border-right: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }

  .t-md-border0        { border: 0 !important; }
  .t-md-borderTop0     { border-top: 0 !important; }
  .t-md-borderLeft0    { border-left: 0 !important; }
  .t-md-borderBottom0  { border-bottom: 0 !important; }
  .t-md-borderRight0   { border-right: 0 !important; }

  .t-md-borderWhite          { border-color: #FFF !important; }
  .t-md-borderBlack          { border-color: #000 !important; }

  .t-md-borderGray90         { border-color: var(--gray-90) !important; }
  .t-md-borderGray80         { border-color: var(--gray-80) !important; }
  .t-md-borderGray60         { border-color: var(--gray-60) !important; }
  .t-md-borderGray40         { border-color: var(--gray-40) !important; }
  .t-md-borderGray30         { border-color: var(--gray-30) !important; }
  .t-md-borderGray20         { border-color: var(--gray-20) !important; }
  .t-md-borderGray10         { border-color: var(--gray-10) !important; }
  .t-md-borderGray5          { border-color: var(--gray-5) !important; }

  .t-md-borderPrimary        { border-color: var(--primary) !important; }
  .t-md-borderPrimaryDark    { border-color: var(--primary-dark) !important; }
  .t-md-borderPrimaryLight   { border-color: var(--primary-light) !important; }

  .t-md-borderSecondary      { border-color: var(--secondary) !important; }
  .t-md-borderSecondaryDark  { border-color: var(--secondary-dark) !important; }
  .t-md-borderSecondaryLight { border-color: var(--secondary-light) !important; }

  .t-md-borderSuccess        { border-color: var(--success) !important; }
  .t-md-borderSuccessDark    { border-color: var(--success-dark) !important; }
  .t-md-borderSuccessLight   { border-color: var(--success-light) !important; }

  .t-md-borderNotice         { border-color: var(--notice) !important; }
  .t-md-borderNoticeDark     { border-color: var(--notice-dark) !important; }
  .t-md-borderNoticeLight    { border-color: var(--notice-light) !important; }

  .t-md-borderWarning        { border-color: var(--warning) !important; }
  .t-md-borderWarningDark    { border-color: var(--warning-dark) !important; }
  .t-md-borderWarningLight   { border-color: var(--warning-light) !important; }

  .t-md-borderError          { border-color: var(--error) !important; }
  .t-md-borderErrorDark      { border-color: var(--error-dark) !important; }
  .t-md-borderErrorLight     { border-color: var(--error-light) !important; }

  .t-md-borderRadius         { border-radius: var(--borderRadius) !important; }
  .t-md-borderRadiusXs       { border-radius: var(--borderRadius-xs) !important; }
  .t-md-borderRadiusSm       { border-radius: var(--borderRadius-sm) !important; }
  .t-md-borderRadiusMd       { border-radius: var(--borderRadius-md) !important; }
  .t-md-borderRadiusLg       { border-radius: var(--borderRadius-lg) !important; }
  .t-md-borderRadiusXl       { border-radius: var(--borderRadius-xl) !important; }
  .t-md-borderRadiusCircle   { border-radius: 100% !important; }
  .t-md-borderRadius0        { border-radius: 0 !important; }
}

@media (--viewport-lg) {
  .t-lg-border         { border: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderTop      { border-top: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderLeft     { border-left: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderBottom   { border-bottom: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderRight    { border-right: var(--borderSize) var(--borderStyle) var(--borderColor) !important; }

  .t-lg-border2x       { border: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderTop2x    { border-top: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderLeft2x   { border-left: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderBottom2x { border-bottom: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderRight2x  { border-right: calc(var(--borderSize) * 2) var(--borderStyle) var(--borderColor) !important; }

  .t-lg-border3x       { border: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderTop3x    { border-top: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderLeft3x   { border-left: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderBottom3x { border-bottom: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderRight3x  { border-right: calc(var(--borderSize) * 3) var(--borderStyle) var(--borderColor) !important; }

  .t-lg-border4x       { border: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderTop4x    { border-top: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderLeft4x   { border-left: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderBottom4x { border-bottom: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }
  .t-lg-borderRight4x  { border-right: calc(var(--borderSize) * 4) var(--borderStyle) var(--borderColor) !important; }

  .t-lg-border0        { border: 0 !important; }
  .t-lg-borderTop0     { border-top: 0 !important; }
  .t-lg-borderLeft0    { border-left: 0 !important; }
  .t-lg-borderBottom0  { border-bottom: 0 !important; }
  .t-lg-borderRight0   { border-right: 0 !important; }

  .t-lg-borderWhite          { border-color: #FFF !important; }
  .t-lg-borderBlack          { border-color: #000 !important; }

  .t-lg-borderGray90         { border-color: var(--gray-90) !important; }
  .t-lg-borderGray80         { border-color: var(--gray-80) !important; }
  .t-lg-borderGray60         { border-color: var(--gray-60) !important; }
  .t-lg-borderGray40         { border-color: var(--gray-40) !important; }
  .t-lg-borderGray30         { border-color: var(--gray-30) !important; }
  .t-lg-borderGray20         { border-color: var(--gray-20) !important; }
  .t-lg-borderGray10         { border-color: var(--gray-10) !important; }
  .t-lg-borderGray5          { border-color: var(--gray-5) !important; }

  .t-lg-borderPrimary        { border-color: var(--primary) !important; }
  .t-lg-borderPrimaryDark    { border-color: var(--primary-dark) !important; }
  .t-lg-borderPrimaryLight   { border-color: var(--primary-light) !important; }

  .t-lg-borderSecondary      { border-color: var(--secondary) !important; }
  .t-lg-borderSecondaryDark  { border-color: var(--secondary-dark) !important; }
  .t-lg-borderSecondaryLight { border-color: var(--secondary-light) !important; }

  .t-lg-borderSuccess        { border-color: var(--success) !important; }
  .t-lg-borderSuccessDark    { border-color: var(--success-dark) !important; }
  .t-lg-borderSuccessLight   { border-color: var(--success-light) !important; }

  .t-lg-borderNotice         { border-color: var(--notice) !important; }
  .t-lg-borderNoticeDark     { border-color: var(--notice-dark) !important; }
  .t-lg-borderNoticeLight    { border-color: var(--notice-light) !important; }

  .t-lg-borderWarning        { border-color: var(--warning) !important; }
  .t-lg-borderWarningDark    { border-color: var(--warning-dark) !important; }
  .t-lg-borderWarningLight   { border-color: var(--warning-light) !important; }

  .t-lg-borderError          { border-color: var(--error) !important; }
  .t-lg-borderErrorDark      { border-color: var(--error-dark) !important; }
  .t-lg-borderErrorLight     { border-color: var(--error-light) !important; }

  .t-lg-borderRadius         { border-radius: var(--borderRadius) !important; }
  .t-lg-borderRadiusXs       { border-radius: var(--borderRadius-xs) !important; }
  .t-lg-borderRadiusSm       { border-radius: var(--borderRadius-sm) !important; }
  .t-lg-borderRadiusMd       { border-radius: var(--borderRadius-md) !important; }
  .t-lg-borderRadiusLg       { border-radius: var(--borderRadius-lg) !important; }
  .t-lg-borderRadiusXl       { border-radius: var(--borderRadius-xl) !important; }
  .t-lg-borderRadiusCircle   { border-radius: 100% !important; }
  .t-lg-borderRadius0        { border-radius: 0 !important; }
}