// Name:            Status
//
// Component:       `status`
//
// Modifiers:       'status-online'
//                  'status-off'
//                  'status-busy'
//                  'status-away'
//                  'status-lg'
//                  'status-md'
//                  'status-sm'
//                  'status-xs'
//
// ========================================================================

// Variables
// ========================================================================
$status-size-sm: 8px !default;
$status-size-lg: 14px !default;
$status-size-xs: 7px !default;
$status-size-md: 10px !default;
$status-online-color: $brand-success !default;
$status-off-color: $brand-dark !default;
$status-busy-color: $brand-warning !default;
$status-away-color: $brand-danger !default;

// Component: Status
// ========================================================================

.status {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid $inverse;
  border-radius: 100%;
}

// Status Modifier
// ========================================================================

.status-online {
  background-color: $status-online-color;
}

.status-off {
  background-color: $status-off-color;
}

.status-busy {
  background-color: $status-busy-color;
}

.status-away {
  background-color: $status-away-color;
}

// Size Modifier
// ========================================================================

.status-lg {
  width: $status-size-lg;
  height: $status-size-lg;
}

.status-md {
  width: $status-size-md;
  height: $status-size-md;
}

.status-sm {
  width: $status-size-sm;
  height: $status-size-sm;
}

.status-xs {
  width: $status-size-xs;
  height: $status-size-xs;
}