/* D E F I N I T I O N S 
     border atoms */

/* This file needs to be placed in src/components/sui-input and vars need to be tailwind classes */

.sugar-input--border-top-left-radius-primary {
  @apply sui-border-top-left-radius-primary;
}
.sugar-input--border-top-right-radius-primary {
  @apply sui-border-top-right-radius-primary;
}
.sugar-input--border-bottom-left-radius-primary {
  @apply sui-border-bottom-left-radius-primary;
}
.sugar-input--border-bottom-right-radius-primary {
  @apply sui-border-bottom-right-radius-primary;
}
.sugar-input--border-left-color-primary {
  @apply sui-border-left-color-primary;
}
.sugar-input--border-right-color-primary {
  @apply sui-border-right-color-primary;
}
.sugar-input--border-top-color-primary {
  @apply sui-border-top-color-primary;
}
.sugar-input--border-bottom-color-primary {
  @apply sui-border-bottom-color-primary;
}
.sugar-input--border-left-width-primary {
  @apply sui-border-left-width-primary;
}
.sugar-input--border-right-width-primary {
  @apply sui-border-right-width-primary;
}
.sugar-input--border-top-width-primary {
  @apply sui-border-top-width-primary;
}
.sugar-input--border-bottom-width-primary {
  @apply sui-border-bottom-width-primary;
}
/* space atoms */
.sugar-input--padding-left {
  @apply sui-padding-left-sm;
}
.sugar-input--padding-right {
  @apply sui-padding-right-sm;
} /* @apply sui-padding-right-sm*/
.sugar-input--padding-top {
  @apply sui-padding-top-xs;
} /*  @apply sui-padding-top-xs*/
.sugar-input--padding-bottom {
  @apply sui-padding-bottom-xs;
}
.sugar-input--margin-left {
  @apply sui-margin-left-xs;
}
.sugar-input--margin-right {
  @apply sui-margin-right-xs;
}
.sugar-input--margin-top {
  @apply sui-margin-top-xs;
}
.sugar-input--margin-bottom {
  @apply sui-margin-bottom-xs;
}
/* color */
.sugar-input--background-color {
  @apply sui-background-gray;
}
.sugar-input--color {
  @apply sui-color-text;
}
/* typo */
.sugar-input--font-size {
  @apply sui-font-size-md;
}
.sugar-input--font-family {
  @apply sui-font-family-secondary;
}
.sugar-input--line-height {
  @apply sui-line-height-secondary;
}
.sugar-input--font-weight {
  @apply sui-font-weight-secondary;
}
.sugar-input--letter-spacing {
  @apply sui-letter-spacing-secondary;
}
.sugar-input--text-transform {
  @apply sui-text-transform-secondary;
}

/* dimensions */

/* A P P L I E S */
.sugar-input--border-width-primary {
  @apply sugar-input--border-left-width-primary sugar-input--border-right-width-primary sugar-input--border-top-width-primary sugar-input--border-bottom-width-primary;
}
.sugar-input--border-color-primary {
  @apply sugar-input--border-left-color-primary sugar-input--border-right-color-primary sugar-input--border-top-color-primary sugar-input--border-bottom-color-primary;
}
.sugar-input--border-radius-primary {
  @apply sugar-input--border-top-left-radius-primary sugar-input--border-top-right-radius-primary sugar-input--border-bottom-left-radius-primary sugar-input--border-bottom-right-radius-primary;
}
.sugar-input--border {
  @apply sugar-input--border-color-primary sugar-input--border-width-primary sugar-input--border-radius-primary;
}
.sugar-input--padding {
  @apply sugar-input--padding-left sugar-input--padding-right sugar-input--padding-top sugar-input--padding-bottom;
}
.sugar-input--margin {
  @apply sugar-input--margin-left sugar-input--margin-right sugar-input--margin-top sugar-input--margin-bottom;
}

.sugar-input {
  @apply sugar-input--border  
            sugar-input--padding  
            sugar-input--margin 
            sugar-input--color 
            sugar-input--background-color 
            sugar-input--font-size
            sugar-input--font-family
            sugar-input--line-height
            sugar-input--font-weight
            sugar-input--letter-spacing;
}