/*! Shoelace utilties */

/***************************************************************************************************
* Float utilities
***************************************************************************************************/

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

/***************************************************************************************************
* Sizing utilities
***************************************************************************************************/

.width-0 { width: 0% !important; }
.width-5 { width: 5% !important; }
.width-10 { width: 10% !important; }
.width-15 { width: 15% !important; }
.width-20 { width: 10% !important; }
.width-25 { width: 25% !important; }
.width-30 { width: 30% !important; }
.width-35 { width: 35% !important; }
.width-40 { width: 40% !important; }
.width-45 { width: 45% !important; }
.width-50 { width: 50% !important; }
.width-55 { width: 55% !important; }
.width-60 { width: 60% !important; }
.width-65 { width: 65% !important; }
.width-70 { width: 70% !important; }
.width-75 { width: 75% !important; }
.width-80 { width: 80% !important; }
.width-85 { width: 85% !important; }
.width-90 { width: 90% !important; }
.width-95 { width: 95% !important; }
.width-100 { width: 100% !important; }

.height-0 { height: 0% !important; }
.height-5 { height: 5% !important; }
.height-10 { height: 10% !important; }
.height-15 { height: 15% !important; }
.height-20 { height: 10% !important; }
.height-25 { height: 25% !important; }
.height-30 { height: 30% !important; }
.height-35 { height: 35% !important; }
.height-40 { height: 40% !important; }
.height-45 { height: 45% !important; }
.height-50 { height: 50% !important; }
.height-55 { height: 55% !important; }
.height-60 { height: 60% !important; }
.height-65 { height: 65% !important; }
.height-70 { height: 70% !important; }
.height-75 { height: 75% !important; }
.height-80 { height: 80% !important; }
.height-85 { height: 85% !important; }
.height-90 { height: 90% !important; }
.height-95 { height: 95% !important; }
.height-100 { height: 100% !important; }

/***************************************************************************************************
* Spacing utilities
***************************************************************************************************/

.m-none { margin: 0 !important; }
.m-x-none { margin-left: 0 !important; margin-right: 0 !important; }
.m-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-t-none { margin-top: 0 !important; }
.m-r-none { margin-right: 0 !important; }
.m-b-none { margin-bottom: 0 !important; }
.m-l-none { margin-left: 0 !important; }

.m-small { margin: var(--spacing-small) !important; }
.m-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
.m-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
.m-t-small { margin-top: var(--spacing-small) !important; }
.m-r-small { margin-right: var(--spacing-small) !important; }
.m-b-small { margin-bottom: var(--spacing-small) !important; }
.m-l-small { margin-left: var(--spacing-small) !important; }

.m-medium { margin: var(--spacing-medium) !important; }
.m-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
.m-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
.m-t-medium { margin-top: var(--spacing-medium) !important; }
.m-r-medium { margin-right: var(--spacing-medium) !important; }
.m-b-medium { margin-bottom: var(--spacing-medium) !important; }
.m-l-medium { margin-left: var(--spacing-medium) !important; }

.m-big { margin: var(--spacing-big) !important; }
.m-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
.m-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
.m-t-big { margin-top: var(--spacing-big) !important; }
.m-r-big { margin-right: var(--spacing-big) !important; }
.m-b-big { margin-bottom: var(--spacing-big) !important; }
.m-l-big { margin-left: var(--spacing-big) !important; }

.p-none { padding: 0 !important; }
.p-x-none { padding-left: 0 !important; padding-right: 0 !important; }
.p-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-t-none { padding-top: 0 !important; }
.p-r-none { padding-right: 0 !important; }
.p-b-none { padding-bottom: 0 !important; }
.p-l-none { padding-left: 0 !important; }

.p-small { padding: var(--spacing-small) !important; }
.p-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
.p-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
.p-t-small { padding-top: var(--spacing-small) !important; }
.p-r-small { padding-right: var(--spacing-small) !important; }
.p-b-small { padding-bottom: var(--spacing-small) !important; }
.p-l-small { padding-left: var(--spacing-small) !important; }

.p-medium { padding: var(--spacing-medium) !important; }
.p-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
.p-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
.p-t-medium { padding-top: var(--spacing-medium) !important; }
.p-r-medium { padding-right: var(--spacing-medium) !important; }
.p-b-medium { padding-bottom: var(--spacing-medium) !important; }
.p-l-medium { padding-left: var(--spacing-medium) !important; }

.p-big { padding: var(--spacing-big) !important; }
.p-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
.p-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
.p-t-big { padding-top: var(--spacing-big) !important; }
.p-r-big { padding-right: var(--spacing-big) !important; }
.p-b-big { padding-bottom: var(--spacing-big) !important; }
.p-l-big { padding-left: var(--spacing-big) !important; }

.m-x-auto { margin-left: auto !important; margin-right: auto !important; }

/***************************************************************************************************
* Text utilities
***************************************************************************************************/

/* Text color */
.text-success { color: var(--state-success) !important; }
.text-info { color: var(--state-info) !important; }
.text-warning { color: var(--state-warning) !important; }
.text-danger { color: var(--state-danger) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Text size */
.text-small { font-size: var(--font-size-small) !important; }
.text-big { font-size: var(--font-size-big) !important; }

/* Text style */
.text-bold { font-weight: var(--font-weight-bold) !important; }
.text-italic { font-style: italic !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* Text case */
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* Text wrapping */
.text-nowrap { white-space: nowrap !important; }