@import "./sassy/main";

[ng-cloak] {
  display: none;
}

#wrapper {
  position: relative;
}

#header-container {
  white-space: nowrap;
  padding-bottom: $body-padding;
  padding-left: $horizontal-padding;
  position: relative;
}

#help-link {
  position: absolute;
  left: 9px;
  top: 52px;
}

#title {
  display: inline-block;
}

#nav-container {
  display: inline-block;
  position: relative;
  left: 20px;
}

#loading-message {
  width: $tab-width;
  height: $tab-height;
  line-height: $tab-height;
  border-bottom: 2px dashed $black-text;
  opacity: $faded-opacity;
  text-align: center;
}

.food-list {
  width: $content-width;

  li {
    padding: 2px $horizontal-padding;

    .food-label {
      width: 100%;
      color: $black-text;
    }

    .food-group {
      float: right;
    }
  }
}

.nutrient-list {
  li {
    padding: 2px $horizontal-padding;
  }
}

.search-form {
  width: $content-width;
  padding: $horizontal-padding 0 $horizontal-padding $horizontal-padding;
  white-space: nowrap;
  position: relative;
}

$comparison-list-width: 300px;
$comparison-header-height: 92px; // comparisonHeaderHeight in visuals.coffee
$comparison-row-height: 46px; // comparisonRowHeight in visuals.coffee

food-comparison {
  position: relative;

  h3 {
    margin-bottom: 2px;
  }

  > div {
    position: relative;
  }
}

.food-comparison-list {
  width: $comparison-list-width;
  position: absolute;
  left: 0;
  top: $comparison-header-height;
  z-index: 1;

  li {
    position: relative;
    height: $comparison-row-height;
    padding-right: $horizontal-padding;
  }

  .food-label {
    height: 100%;
    width: 100%;
    display: table; // vertical centering hack for variable height children

    span {
      display: table-cell;
      vertical-align: middle;
      padding: 0 $horizontal-padding;
      color: $black-text;
      line-height: 1;
    }
  }
}

.remove-button {
  position: absolute;
  left: -20px;
  top: 14px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  padding-left: $horizontal-padding;
  color: $light-gray-text;

  &:hover {
    font-weight: bold;
    color: $master-color;
  }

  &:active {
    color: $master-dark-color;
  }
}

.food-comparison-graphs {
  white-space: nowrap;
  margin-left: $comparison-list-width + $horizontal-padding;

  svg {
    margin-left: -4px; // to prevent text disappearance problems

    &:first-child {
      position: relative;
      top: 3px;
    }
  }
}

.clear-selected-button {
  position: relative;
  top: 10px;
  margin-left: $horizontal-padding;
}

.nutrient-label {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.text-with-icon {
  width: $content-width;
  $icon-size: 48px;
  position: relative;
  padding-left: $icon-size + $horizontal-padding * 2;
  min-height: $icon-size;
  margin-bottom: $font-size * 2;

  img {
    width: $icon-size;
    height: $icon-size;
    position: absolute;
    left: 0;
    top: 0;
  }
}

nutrient-list {
  display: block;
  margin-bottom: $vertical-padding;
}

.nutrient-graph {
  display: inline-block;
  width: 100px;
  height: 16px;
  background-color: transparentize($green, 0.5);
  position: relative;
  top: 3px;
}

.nutrient-bar {
  background-color: $green;
  height: 16px;
}

food-detail {
  white-space: nowrap;
}

.food-detail-graph {
  margin: $vertical-padding 0;
  display: inline-block;
}

.food-detail-pie-chart-labels {
  display: inline-block;
  font-size: $h3-font-size;
  position: relative;
  top: -61px;
  left: 13px;
}

.fat {
  color: $red;
}

.carbohydrate {
  color: $green;
}

.protein {
  color: $blue;
}

.padded-left {
  padding-left: $horizontal-padding;
}

.padded {
  padding: $horizontal-padding;
}

food-group-filter {
  position: absolute !important;
  right: 0;
  top: $horizontal-padding;

  ul {
    li {
      position: relative;
      padding-right: 46px !important;

      span {
        position: absolute;
        right: $horizontal-padding;
        top: 6px;
      }
    }
  }
}

.mm-dropdown {
  @include dropdown(2px);
}

#presets {
  width: 179px;
  margin-bottom: 8px;

  .dropdown-content {
    li {
      padding: 0 30px 0 $horizontal-padding;
      position: relative;
    }

    .selectable {
      padding: 3px $horizontal-padding;
    }
  }

  .dropdown-toggle {
    display: inline-block;
  }

  #save-preset {
    white-space: nowrap;
    margin-bottom: $horizontal-padding;
    padding-right: $horizontal-padding;

    button {
      margin-left: 2px;
    }
  }

  .remove-button {
    left: auto;
    right: 11px;
    top: 5px;
  }
}

#nutrients {
  .food-list {
    .food-label {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

$column-width: 175px;
$overflow-column-width: 250px;
$num-columns: 8;

#nutrient-columns {
  position: relative;
  height: 350px;
  width: $column-width * ($num-columns - 1) + $overflow-column-width + $body-padding;
}

.column {
  position: absolute;
  top: 0;
  width: $column-width;
  padding: 0 $horizontal-padding $horizontal-padding $horizontal-padding;

  $i: 1;
  @while $i <= $num-columns {
    &:nth-child(#{$i}) {
      left: ($i - 1) * $column-width;
    }
    $i: $i + 1;
  }

  &:last-child {
    width: $overflow-column-width;
  }
}

#database-list {
  width: $content-width;
}