$COLOR_LIGHT_GRAY: #D3D3D3;
$COLOR_GRAY: #D8D8D8;
$COLOR_DARK_BLUE: #2A3052;
$COLOR_ASH_GRAY: #E8E8E8;
$COLOR_WHITE: #FFFFFF;
$COLOR_SHADOW_GRAY: #F5F5F5;

.workspace-manager-dialog {
  background: $COLOR_LIGHT_GRAY;
  padding: 0 !important;
  position: relative;
  overflow: hidden;

  .tabs {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid $COLOR_GRAY;
    > div {
      cursor: pointer;
      flex-grow: 1;
      text-align: center;
      color: $COLOR_DARK_BLUE;
      box-sizing: border-box;
      border-bottom: 3px solid transparent;
      line-height: 30px;
      position: relative;
      top: 1px;
      &.selected {
        border-bottom: 3px solid $COLOR_DARK_BLUE;
      }
    }
  }

  .active-tab {
    margin-top: 34px;
    height: calc(100% - 34px);
    overflow-y: scroll;
    overflow-x: hidden;
    .current-workspace {
      background-color: $COLOR_GRAY;
      height: 38px;
      display: flex;
      text-align: center;
      .name {
        flex-grow: 1;
        padding: 0 10px;
        display: flex;
        align-items: center;
        position: relative;
        input {
          height: 30px;
          box-shadow: none;
          line-height: 30px;
          background-color: transparent;
          border: none;
          &:hover { background-color: $COLOR_SHADOW_GRAY; }
          &:focus { background-color: $COLOR_WHITE; }
          &:focus + .icon-confirm { pointer-events: all; opacity: 1; }
          font-weight: bold;
        }
        .icon-confirm {
          position: absolute;
          right: 5px;
          pointer-events: none;
          opacity: 0;
        }
      }
    }
    .dialogs {
      .dialog {
        line-height: 30px;
        display: flex;
        cursor: pointer;
        .name {
          padding-left: 24px;
          flex-grow: 1;
          font-size: small;
        }
        & > *:hover {
          background-color: $COLOR_ASH_GRAY;
        } 
      }
    }
    [data-balloon]{
      border-bottom: none;
      &:before, &:after { transition: none; }
      &:before {
        box-shadow: none;
        border: none;
        border-radius: 0;
        font-size: 12px;
        padding: 4px 8px;
        transform: translate(-50%, -15px);
      }
      &:hover:after, &:hover:before {
        transform: translate(-50%, -15px);
      }
      &.icon-saveas:hover:before {
        transform: translate(-90%, -15px);
      }
    }
  }

  .saved-tab {
    margin-top: 34px;
    height: calc(100% - 34px);
    overflow-y: scroll;
    overflow-x: hidden;
    .load-workspace {
      cursor: pointer;
      line-height: 34px;
      height: 34px;
      display: flex;
      flex-direction: row;
      color: $COLOR_DARK_BLUE;
      .name { flex-grow: 1 }
    }
    .workspaces {
      > div {
        line-height: 32px;
        height: 32px;
        display: flex;
        .name {
          flex-grow: 1;
          padding: 0 10px 0 0px;
          display: flex;
          align-items: center;
          position: relative;
          input {
            height: 28px;
            box-shadow: none;
            line-height: 30px;
            background-color: transparent;
            border: none;
            &:hover { background-color: $COLOR_SHADOW_GRAY; }
            &:focus { background-color: $COLOR_ASH_GRAY; }
          }
        }
      }
    }
  }
  .icon-remove, .icon-delete {
    width: 30px;
    background: url('../images/delete-black.svg') no-repeat 50% 50% ;
    &:hover { background-color: $COLOR_ASH_GRAY; }
    cursor: pointer;
  }
  .icon-download{
    width: 30px;
    background: url('../images/ic-download.svg') no-repeat 50% 50% ;
    &:hover { background-color: $COLOR_ASH_GRAY; }
    cursor: pointer;
  }
  .icon-save {
    width: 38px;
    background: url('../images/save.svg') no-repeat 50% 50% ;
    &:hover { background-color: $COLOR_ASH_GRAY; }
    cursor: pointer;
  }
  .icon-saveas {
    width: 38px;
    background: url('../images/save-as.svg') no-repeat 50% 50% ;
    &:hover { background-color: $COLOR_ASH_GRAY; }
    cursor: pointer;
  }
  .icon-tick-normal {
    width: 38px;
    height: 100%;
    background: url('../images/ic-tick-normal.svg') no-repeat 50% 50% ;
    cursor: pointer;
    &:hover { opacity: 0.9; }
  }
  .icon-tick-selected {
    width: 38px;
    height: 100%;
    background: url('../images/ic-tick-selected.svg') no-repeat 50% 50% ;
    cursor: pointer;
    &:hover { opacity: 0.9; }
  }
  .icon-upload {
    width: 38px;
    height: 100%;
    background: url('../images/ic-load-workspace.svg') no-repeat 50% 50% ;
    cursor: pointer;
    &:hover { opacity: 0.9; }
  }
  .icon-confirm {
    width: 38px;
    height: 100%;
    background: url('../images/btn-confirm-green.svg') no-repeat 50% 50% ;
    cursor: pointer;
    &:hover { opacity: 0.9; }
  }
  .icon-plus {
    width: 38px;
    height: 100%;
    background: url('../images/create.svg') no-repeat 50% 50% ;
    cursor: pointer;
    &:hover { opacity: 0.9; }
  }
}
