// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import 'octicon-utf-codes';
@import 'ui-variables';
@import 'icon';

@font-face {
  font-family: 'icomoon';
  src: url('atom://ide-haskell/resources/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.clickable() {
  flex-shrink: 0;
  flex-grow: 0;
  display: inline-block;
  line-height: 1.8em;
  color: @text-color-subtle;
  border: 1px solid @button-border-color;
  background: fade(@button-background-color, 33%);
  cursor: pointer;
  vertical-align: middle;

  &:active {
    background: transparent;
  }
}

.status-icon() {
  &:before {
    .icon;
    font-size: 1.2em;
    margin: 0 0.5em;
    content: @check;
  }

  &[data-status='progress']:before {
    content: @hourglass;
  }
  &[data-status='ready']:before {
    content: @check;
  }
  &[data-status='error']:before {
    color: @text-color-error;
    content: @alert;
  }
  &[data-status='warning']:before {
    content: @stop;
    color: @text-color-warning;
  }
}

ide-haskell-panel {
  display: flex;

  &.buttons-top {
    width: auto !important;
    flex-direction: column;
    ide-haskell-panel-heading {
      flex-direction: row;
      ide-haskell-panel-buttons {
        flex-direction: row;
        ide-haskell-button {
          margin-right: -1px; // hide left border
          &:first-of-type {
            border-top-left-radius: @component-border-radius;
            border-bottom-left-radius: @component-border-radius;
          }
          &:last-of-type {
            margin-right: 0.6em;
            border-top-right-radius: @component-border-radius;
            border-bottom-right-radius: @component-border-radius;
          }
        }
      }
    }
  }
  &.buttons-left {
    height: auto !important;
    flex-direction: row;
    ide-haskell-panel-heading {
      flex-direction: column;
      ide-haskell-panel-buttons {
        flex-direction: column;
        ide-haskell-button {
          margin-top: -1px; // hide left border
          &:first-of-type {
            border-top-left-radius: @component-border-radius;
            border-top-right-radius: @component-border-radius;
          }
          &:last-of-type {
            margin-bottom: 0.6em;
            border-bottom-left-radius: @component-border-radius;
            border-bottom-right-radius: @component-border-radius;
          }
        }
      }
      progress {
        transform-origin: center center;
        transform: rotate(-90deg) translateX(-50%);
        width: 100%;
      }
    }
  }

  ide-haskell-panel-heading {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;

    ide-haskell-status-icon {
      padding: 0.5ex 0;
      margin: 0px 0.5em;
      .status-icon();
    }

    ide-haskell-button {
      .clickable;
      height: 1.7em;
      white-space: nowrap;
      &.cancel {
        width: 2em;
        border-radius: @component-border-radius;
        margin: 0.5ex;
        &:before {
          .icon;
          display: block;
          text-align: center;
          font-size: 1.7em;
          content: @x;
        }
      }
    }

    ide-haskell-panel-buttons {
      display: flex;
      ide-haskell-button {
        text-transform: capitalize;
        padding: 0 0.6em;

        &.active {
          color: @text-color-highlight;
          background: @button-background-color;
        }

        &:before {
          content: attr(data-caption);
        }

        &:not([data-count='0']):before {
          content: attr(data-caption) ' (' attr(data-count) ')';
        }
      }
    }
    ide-haskell-checkbox.ide-haskell-checkbox--uri-filter {
      .clickable;
      position: relative;
      margin: 0.125em;
      font-size: 1.2em;
      &:before {
        font-family: 'icomoon';
        content: '\e930';
        margin: 0 0.5em;
      }
      &.enabled:before {
        content: '\e926';
      }
      border-radius: @component-border-radius;
    }
  }

  ide-haskell-param {
    .clickable;
    position: relative;
    border-radius: @component-border-radius;
    font-size: 1.2em;
    margin: 0.125em;
    &:before {
      content: attr(data-display-name) ':';
    }
    ide-haskell-param-value {
      margin-right: 1ex;
    }
    &.hidden-value {
      &:before {
        content: attr(data-display-name);
      }
      ide-haskell-param-value {
        display: none;
      }
    }
  }

  ide-haskell-panel-items {
    display: block;
    overflow-y: auto;
    padding: 3px @component-padding;
    height: 100%;
    flex-grow: 1;

    ide-haskell-panel-item {
      padding: 0.5em 0;
      margin: 0;
      white-space: normal;

      ide-haskell-item-position {
        cursor: pointer;
        display: inline-block;
      }

      ide-haskell-item-context {
        display: inline-block;
        font-family: Consolas, monospace;
        margin-left: 1em;
      }

      ide-haskell-item-description {
        display: block;
        padding: 0.2em 1em;
        color: lighten(@text-color, 15%);
        background-color: @tool-panel-background-color;
        font-family: Consolas, monospace;
        white-space: pre-wrap;
        border-radius: 0.5em;
      }
    }
  }
}

ide-haskell-tooltip-with-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;

  ide-haskell-tooltip-actions {
    pointer-events: all;
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
  }

  ide-haskell-tooltip {
    pointer-events: all;
    flex-grow: 0;
    flex-shrink: 0;
    &::before {
      border-width: 0 0.5ch 0.5ch;
      border-style: solid;
      border-color: @overlay-border-color transparent;
      display: block;
      width: 0;
      position: absolute;
      top: -0.5ch;
      left: 0;
      height: 0.5ch;
      background-size: 50% 100%;
      background-repeat: no-repeat;
      margin: 0;
      padding: 0;
      content: '';
    }
    & > div {
      text-align: left;
      // color: @text-color-info;
      font-size: 85%;
      display: block;
      white-space: pre-wrap;
      background: none !important;
      word-break: break-all;
    }
    & > div + div {
      margin-top: 1em;
    }
    display: block;
    background: @overlay-background-color;
    border: solid 2px @overlay-border-color;
    padding: 5px;
    border-radius: 0 0.5em;
    &.ide-haskell-tooltip-subdued {
      opacity: 0.3;
    }
  }
}

.select-list.ide-haskell {
  .select-list-heading {
    color: @text-color-highlight;
    font-size: 150%;
    text-align: center;
  }
  .list-group.ide-haskell.mark-active > li {
    display: flex;
    align-items: center;
    & > div {
      flex-grow: 1;
    }
  }
}

.ide-haskell-status-tooltip .tooltip-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  ide-haskell-status-icon {
    .status-icon();
    &:before {
      margin-left: 0;
    }
  }
  ide-haskell-status-detail {
    display: block;
    margin-left: 1.7em;
  }
  ide-haskell-status-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

// A hack to catch mouse events only on .scroll-view
atom-overlay.ide-haskell {
  pointer-events: none;
}

.status-bar-right .ide-haskell {
  padding-bottom: -0.3em;
  &:hover span {
    border-bottom: solid 1px;
  }
  ide-haskell-lambda {
    -webkit-mask: url('atom://ide-haskell/resources/haskell.svg') no-repeat 50%
      50%;
    mask: url('atom://ide-haskell/resources/haskell.svg') no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: @text-color;
    width: 2em;
    height: 1em;
    display: inline-block;
    margin-bottom: -0.1em;
  }
  ide-haskell-status-icon {
    .status-icon();
    margin-right: 0;
  }
}
