/*------------------------------------
  Focus state border
------------------------------------*/

/* Primary Colors */
.g-brd-primary {
  &--focus:focus,
  &--focus.g-state-focus *,
  &--focus.g-state-focus *:focus {
    border-color: $g-color-primary !important;
  }
}

/* Black Colors */
.g-brd-black {
  &--focus:focus,
  &--focus.g-state-focus *,
  &--focus.g-state-focus *:focus {
    border-color: $g-color-black !important;
  }
}

/* White */
.g-brd-white {
  &--focus:focus,
  &--focus.g-state-focus *,
  &--focus.g-state-focus *:focus {
    border-color: $g-color-white !important;
  }
}

/* Gray Colors */
.g-brd-gray {
  // Dark Gray
  &-dark {
    &-v1 {
      &--focus:focus,
      &--focus.g-state-focus *,
      &--focus.g-state-focus *:focus {
        border-color: $g-color-gray-dark-v1 !important;
      }
    }

    &-v2 {
      &--focus:focus,
      &--focus.g-state-focus *,
      &--focus.g-state-focus *:focus {
        border-color: $g-color-gray-dark-v2 !important;
      }
    }

    &-v3 {
      &--focus:focus,
      &--focus.g-state-focus *,
      &--focus.g-state-focus *:focus {
        border-color: $g-color-gray-dark-v3 !important;
      }
    }

    &-v4 {
      &--focus:focus,
      &--focus.g-state-focus *,
      &--focus.g-state-focus *:focus {
        border-color: $g-color-gray-dark-v4 !important;
      }
    }

    &-v5 {
      &--focus:focus,
      &--focus.g-state-focus *,
      &--focus.g-state-focus *:focus {
        border-color: $g-color-gray-dark-v5 !important;
      }
    }

    // Light Gray
    &-light {
      &-v1 {
        &--focus:focus,
        &--focus.g-state-focus *,
        &--focus.g-state-focus *:focus {
          border-color: $g-color-gray-light-v1 !important;
        }
      }

      &-v2 {
        &--focus:focus,
        &--focus.g-state-focus *,
        &--focus.g-state-focus *:focus {
          border-color: $g-color-gray-light-v2 !important;
        }
      }

      &-v3 {
        &--focus:focus,
        &--focus.g-state-focus *,
        &--focus.g-state-focus *:focus {
          border-color: $g-color-gray-light-v3 !important;
        }
      }

      &-v4 {
        &--focus:focus,
        &--focus.g-state-focus *,
        &--focus.g-state-focus *:focus {
          border-color: $g-color-gray-light-v4 !important;
        }
      }

      &-v5 {
        &--focus:focus,
        &--focus.g-state-focus *,
        &--focus.g-state-focus *:focus {
          border-color: $g-color-gray-light-v5 !important;
        }
      }
    }
  }
}

/* Transparent */
.g-brd-transparent {
  &--focus:focus,
  &--focus.g-state-focus *,
  &--focus.g-state-focus *:focus {
    border-color: transparent !important;
  }
}

/* Color Red */
.g-brd-red {
  &--focus:focus,
  &--focus.g-state-focus *,
  &--focus.g-state-focus *:focus {
    border-color: $g-color-red !important;
  }
}