QutBioacousticsResearchGroup/bioacoustic-workbench

@import 'base';
@import '../_dynamic.css.scss.erb';



baw-annotation-viewer {

  & .tag-preview {

    font-size: 9pt;

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;

      position:  relative;
      height:  60px;
      //overflow: none;
      line-height: $standard-line-height;

      li {
        border-bottom: red solid 1px;
        margin-left: -4px;
        position: absolute;
        bottom:  -1px;
        padding-left: 2px;

        @include vendor-prefix(transform-origin, 0 0);
        @include vendor-prefix(transform, rotate3d(0,0,1,-20deg));

      }
    }

  }


  & #scroller{
    overflow-x: scroll;
    overflow-y: hidden;
    line-height: 0;
  }

  & .annotation-viewer {

    display: inline-block;
    position: relative;
    line-height: 0;
    padding: 0;
    margin: 0;


    & img {

    }

    // overlay
    & img + div {
      width: 100%;
      height : 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;

      // debug
     // @if $DEBUG { background-color: rgba(255,0,0,0.15) ;}

      // required for IE10
      background-color: rgba(255, 255, 255, 0);

    }

    & .positionLine {
      border-left: solid 1px red;
      height: 100%;
      width: 1px;
      position: absolute;
      top:  0;
      left: 0;
      -webkit-transform: translatex(0px);
    }
  }

  & .controls {

  }

  // general

  & .boxItem {

    border-style: $border-style;
    border-width: $border-width;
    border-color: nth($master-highlight, 2);
    position: absolute;
    background-color: rgba(255,255,255,0.05);
    overflow: visible;

    &:before {
      border-left: red solid 1px;
      height: 256px;
      position: relative;
      top: -257px;
      left: -1px;
      display: inline-block;
      content: "";
    }

    &[data-selected="true"] {
      border-color: nth($master-complementary, 2);
      @include glow(nth($master-background, 2));

      & .close-icon{
        visibility: visible;
      }
    }

    &:hover .close-icon {
      visibility: visible;
    }
  }

  & .close-icon {
    position: absolute;
    left: 3px;
    top: 6px;
    color: black;
    font-weight: bold;
    font-size: 12px;
    font-family: sans-serif;
    vertical-align: top;
    cursor: pointer;

    &:before{
      content: "x";
    }

    visibility: hidden;
  }
}