@import '../../../node_modules/laborer/common/style/tech-mixins';
@import '../config/constants';
@import 'variables';

%bubble-cont {
  @extend %menu-cont;
  z-index: 31;

  .shpitz {
    $shpitz-size: 12px;
    $clip-size: 60px;
    position: absolute;
    width: $clip-size;
    height: $clip-size;
    overflow: hidden;
    pointer-events: none;

    &:after {
      content: '';
      position: absolute;
      width: $shpitz-size;
      height: $shpitz-size;
      transform: rotate(45deg);
      background: $white;
      box-shadow: 0 0 4px 0 rgba($black, 0.35);
    }

    &.top {
      top: $clip-size * -1;
      left: 50%;
      margin-left: $clip-size * -0.5;

      &:after {
        bottom: 0;
        left: 50%;
        margin-left: $shpitz-size * -0.5;
        margin-bottom: $shpitz-size * -0.5;
      }
    }

    &.bottom {
      bottom: $clip-size * -1;
      left: 50%;
      margin-left: $clip-size * -0.5;

      &:after {
        top: 0;
        left: 50%;
        margin-left: $shpitz-size * -0.5;
        margin-top: $shpitz-size * -0.5;
      }
    }

    &.left {
      left: $clip-size * -1;
      top: 50%;
      margin-top: $clip-size * -0.5;

      &:after {
        right: 0;
        top: 50%;
        margin-top: $shpitz-size * -0.5;
        margin-right: $shpitz-size * -0.5;
      }
    }

    &.right {
      right: $clip-size * -1;
      top: 50%;
      margin-top: $clip-size * -0.5;

      &:after {
        left: 0;
        top: 50%;
        margin-top: $shpitz-size * -0.5;
        margin-left: $shpitz-size * -0.5;
      }
    }
  }
}

%header-bar {
  background: $brand;
  color: $white;
  font-size: 16px;
  z-index: 11;

  .left-bar {
    display: inline-block;
    height: 100%;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;

    .menu-icon {
      display: inline-block;
      padding: 11px 5px;

      svg path {
        fill: #fff;
      }
    }

    .title {
      display: inline-block;
      font-size: 15px;
      margin-top: 13px;
      padding: 0 7px;
    }
  }

  .right-bar {
    position: absolute;
    top: 0;
    right: 12px;

    .text-button {
      display: inline-block;
      font-size: 12px;
      text-transform: uppercase;
      height: 42px;
      line-height: 42px;
      padding: 0 5px;
      margin-right: 2px;
      cursor: pointer;
    }

    .icon-button {
      display: inline-block;
      padding: 11px 5px;
      cursor: pointer;

      &:not(:first-child) {
        margin-left: 3px;
      }

      &:active:after { display: none; }

      &.help:after { content: 'Google Groups'; }
      &.auto-refresh:after { content: 'Refresh options'; }
      &.hiluk:after { content: 'Share link'; }
      &.user:after { content: 'User'; }
      &.github:after { content: 'Pivot on Github'; }
      &.settings:after { content: 'Settings'; }

      &:hover:after {
        opacity: 1;
      }

      &:after {
        @extend %menu-cont;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        display: block;
        bottom: -24px;
        right: 0;
        padding: 5px;
        color: $text-standard;
        font-size: 12px;
        white-space: nowrap;
      }

      svg path {
        fill: #fff;
      }

    }
  }

  svg {
    height: 19px;
    width: 19px;
  }
}

%side-by-side {
  display: flex;

  & > * {
    margin-right: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

// Buttons

%button-base {
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;
  min-width: 46px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  height: $input-height;

  //transition-property: all;
  //transition-duration: $duration;

  &.active,
  &:active {
    //transition-duration: 0s;
  }

  &.disabled,
  &[disabled] {
    opacity: .60;
    cursor: default;
    pointer-events: none;
  }
}

%button-primary {
  @extend %button-base;
  background: $brand;
  color: $white;

  svg path {
    fill: $white;
  }

  &:hover {
    background: darken($brand, 5%);
  }

  &.active,
  &:active {
    background: darken($brand, 10%);
    color: darken($white, 12%);

    svg path {
      fill: darken($white, 12%);
    }
  }
}

%button-secondary {
  @extend %button-base;
  background: rgba($brand, 0.22);
  color: $brand;

  svg path {
    fill: $brand;
  }

  &:hover {
    background: rgba($brand, 0.3);
  }

  &.active,
  &:active {
    background: rgba($brand, 0.38);
  }
}

%module {
  background: $white;
  box-shadow: 0 1px 1px 0 rgba($black, 0.1);
}

%module-h-title {
  .title {
    @include pin-left($bar-title-width);
    padding: 12px 0 0 $padding-compact;
    font-size: 12px;
    text-transform: uppercase;
    color: $text-light;
  }
}

%menu-cont {
  background: $white;
  border-radius: $corner;
  box-shadow: 0 3px 10px 0 hsla(0, 0, 0, 0.26), 0 0 3px 0 hsla(0, 0, 0, 0.16);
}

%input-cont {
  background: $white;
  border: 1px solid $border-light;
  border-radius: $corner;
  cursor: pointer;
  box-shadow: 0 1px 1px 0 hsla(0, 0, 0, 0.1);

  &:hover {
    border-color: $border-medium;
  }
}

%input-selected {
  box-shadow: inset 0 1px 1px 0 hsla(0, 0, 0, 0.1);
  background: $background-light;
}

%input-cont-inset {
  background: $white;
  border: 1px solid $border-light;
  border-radius: $corner;
  box-shadow: inset 0 1px 1px 0 hsla(0, 0, 0, 0.1);
}

%indicator-field {
  @include ellipsis;
  height: $input-height;
  line-height: $input-height - 2px;
  //border: 1px solid #dfdfdf;
  background: #f2f2f2;
  border-radius: $corner;
  color: #909090;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

%input-top-label {
  text-transform: uppercase;
  font-size: 12px;
  color: $text-lighterish;
  margin-bottom: 5px;
}

%dimension-item {
  padding: 0 0 0 9px;
  background: $item-categorical;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s ease-in-out;
  width: $item-width;

  .reading {
    @include ellipsis;
    pointer-events: none;
    white-space: nowrap;
    margin-right: 20px;
    height: 16px;
    margin-top: 7px;
  }

  .remove {
    @include pin-right(27px);
    text-align: center;
    padding-top: 9px;
    cursor: pointer;

    svg {
      width: 10px;
    }

    path {
      fill: hsla(0, 0, 0, 0.2);
    }

    &:hover path {
      fill: hsla(0, 0, 0, 0.5);
    }
  }

  &:hover,
  &.selected {
    background-color: darken($item-categorical, 6%);
  }

  &.type-time,
  &.type-number {
    background: $item-continuous;

    &:hover,
    &.selected {
      background-color: darken($item-continuous, 6%);
    }
  }
}

%dimension-item-h {
  top: $control-padding-v;
  bottom: $control-padding-v;
}

%white-shadow {
  &:after {
    @include pin-full;
    content: '';
    pointer-events: none;
    box-shadow: inset 0 -20px 10px -10px $white;
    border-radius: $corner;
  }
}

%modal-cont {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

%side-by-side {
  display: flex;

  > input {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
  }

  :not(:last-child) {
    margin-right: 8px;
  }
}

%input-field {
  border: 1px solid #d4d4d4;
  border-radius: $corner;
  box-shadow: inset 0 1px 1px rgba($black, 0.13);
  padding-left: 6px;
  padding-right: 6px;
  width: 100%;
  height: $control-height;

  &:hover {
    border-color: #b8b8b8;
  }

  &:focus {
    border-color: $brand;
  }

  &.error {
    border-color: $danger;
  }
}