// CSS space
$properties: (
  "m": "margin", 
  "p": "padding",
);

$sides: (
  "t": "top", 
  "b": "bottom",
  "l": "left",
  "r": "right",
  "x": "",
  "y": "",
);

$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
);

$size: 100;

@for $i from 0 through $size {
  @each $property_key, $property_value in $properties {
    .tcf-#{$property_key}-#{$i} {
      #{$property_value}: #{$i}px !important;
    }

    @each $side_key, $side_value in $sides {
      // Run only one time
      @if $i == 0 {
        .tcf-#{$property_key}#{$side_key}-auto {
          @if $side_key == x {
            #{$property_value}-left: auto !important;
            #{$property_value}-right: auto !important;
          } @else if $side_key == y {
            #{$property_value}-top: auto !important;
            #{$property_value}-bottom: auto !important;
          } @else {
            #{$property_value}-#{$side_value}: auto !important;
          }
        }
      }
      
      .tcf-#{$property_key}#{$side_key}-#{$i} {
        @if $side_key == x {
          #{$property_value}-left: #{$i}px !important;
          #{$property_value}-right: #{$i}px !important;
        } @else if $side_key == y {
          #{$property_value}-top: #{$i}px !important;
          #{$property_value}-bottom: #{$i}px !important;
        } @else {
          #{$property_value}-#{$side_value}: #{$i}px !important;
        }
      } 
    }
  }
}
// End CSS space

// CSS Border Radius
$border-radius-range: 100;
@for $i from 0 through $border-radius-range {
  .tcf-border-radius-#{$i} {
    border-radius: #{$i}px !important;
  }
}
// End CSS Border Radius

// CSS Colums grid
.tcf-row {
  display: flex;
}

.tcf-col {flex: 1;}
.tcf-col-1 {flex-basis: 8.33%;}
.tcf-col-2 {flex-basis: 16.66%;}
.tcf-col-3 {flex-basis: 25%;}
.tcf-col-4 {flex-basis: 33.33%;}
.tcf-col-5 {flex-basis: 41.66%;}
.tcf-col-6 {flex-basis: 50%;}
.tcf-col-7 {flex-basis: 58.33%;}
.tcf-col-8 {flex-basis: 66.66%;}
.tcf-col-9 {flex-basis: 75%;}
.tcf-col-10 {flex-basis: 83.33%;}
.tcf-col-11 {flex-basis: 91.66%;}
.tcf-col-12 {flex-basis: 100%;}

[class*="col-"] {
  padding: 15px;
}
// End CSS Colums grid

// CSS layout
.tcf-clearfix::after {
  content: "";
  clear: both;
  display: block;
}

.tcf-float-right {
  float: right;
}

.tcf-float-left {
  float: left;
}

.tcf-d-flex {
  display: flex;
}

.tcf-justify-content-center {
  justify-content: center;
}

.tcf-justify-content-flex-start {
  justify-content: flex-start;
}

.tcf-justify-content-flex-end {
  justify-content: flex-end;
}

.tcf-align-items-center {
  align-items: center;
}
// End CSS layout


// CSS Text
.tcf-text-success {
  color: green;
}

.tcf-text-error {
  color: red;
}

.tcf-text-gray {
  color: rgba(0,0,0,.4);
}

.tcf-text-bold {
  font-weight: bold;
}

.tcf-text-normal {
  font-weight: normal;
}

.tcf-h1 {
  font-size: 20px !important;
}

.tcf-h2 {
  font-size: 18px !important;
}

.tcf-h3 {
  font-size: 16px !important;
}

.tcf-h4 {
  font-size: 14px !important;
}

.tcf-h5 {
  font-size: 12px !important;
}

.tcf-h6 {
  font-size: 10px !important;
}

.tcf-text-uppercase {
  text-transform: uppercase;
}

.tcf-text-lowercase {
  text-transform: lowercase;
}

.tcf-text-capitalize {
  text-transform: capitalize;
}
// End CSS Text

// CSS Button
.tcf-btn {
  border: none;
  outline: none;
  color: white;
  padding: 11px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.tcf-btn-danger {
  background-color: #f44336;
}

.tcf-btn-blue {
  background-color: #008CBA;
}

.tcf-btn-gray {
  background-color: #e7e7e7; 
  color: black;
}
// End CSS Button

.tcf-w-100 {
  width: 100%;
}