$color-almostwhite: #fcfcfc;
$color-almostblack: #0d0d0d;

$bgcolor-main: $color-almostwhite;
$bgcolor-background: white;
$bgcolor-header: #fbfbfb;
$bgcolor-badge: #ebebeb;

$color-text: $color-almostblack;
$color-text-secondary: grey;
$color-label: grey;
$color-border: #ddd;
$color-border-hover: silver;
$color-disabled: silver;

$bgcolor-panel-header: $bgcolor-header;
$bgcolor-panel-footer: $bgcolor-header;

$color-btn-primary: #337ab7;
$color-btn-primary-border: #2e6da4;
$color-icon-active: $color-border;

$color-blue1: #259dcb;
$color-red: #b94a48;

$border: solid 1px $color-border;
$gap: 10px;

$text-font-size: 16px;
$label-font-size: 14px;

$color-text-footer: #607d8b;

// golden ratio
$golden-ratio-big: 62%;
$golden-ratio-small: 38%;

// top nav bar including toolbar
$color-nav: #bbdefb; //#23527c;//#FFE0B2;
$color-nav-hover: white; //#337ab7; //#E0F7FA;
$color-nav-active: #e0f7fa;
$color-icon-hover: #0d47a1;
$color-icon: #428bca;
$color-help-icon: silver;

$color-link: #337ab7;
$color-link-hover: #23527c;

$color-svg-hover: $color-blue1;

$ease-time: 0.2s;
$delay-time: 0.2s;
$delay-time2: 0.6s;

$field-h-spacing: 16px;

$radius: 12px;
$media-small: 600px;

$icon-size: 16px;

@mixin flex-holder() {
  display: flex;
  flex-wrap: wrap;
  // width: 100%;
}
@mixin flex-item() {
  box-sizing: border-box;
  flex-grow: 1;
}
@mixin ellipsis() {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

@mixin link-focus {
  display: inline-block;
  outline: none;
  &:focus {
    svg {
      fill: $color-svg-hover;
    }
  }
}

@mixin icons-actions {
  svg {
    fill: $color-icon;
    cursor: pointer;
    &:hover {
      fill: $color-icon-hover;
    }
    &.active {
      fill: $color-almostblack;
      cursor: default;
    }
  }
  &.sort {
    position: absolute;
    top: 30px;
    right: 5px;
  }
}
