/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018, 2019. All Rights Reserved.
 * Copyright (c) 2020 Red Hat, Inc.
 *
 * Note to U.S. Government Users Restricted Rights:
 * Use, duplication or disclosure restricted by GSA ADP Schedule
 * Contract with IBM Corp.
 *******************************************************************************/
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'variables';


/********************************************
  ****   PURE TOPOLOGY PAGE ********
  ********************************************/

.bx--tabs.topologyDiagramTabs {
  padding-left: 5%;
  background-color: white;
  min-height: 3rem;
  overflow: hidden;
}

.topologyDiagramContainer {
  height: 100%;
  display: flex;
  background-color: #fff;
  position: relative;

  .refresh-time-container {
    display: flex;
    align-items: center;
    font-size: 12px;
    position: fixed;
    right: 1.5625rem;
    top: 6.5rem;
    height: 1.25rem;
    margin-right: 0.625rem;
    padding: 1rem 1rem 3.375rem;

    .bx--loading--small {
      width: 1rem;
      height: 1rem;
      margin: -2px 0;
    }
  }

  .diagramControls {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 400px;
  }

  .channel-controls-container {
    display: flex;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    width: 282px;
    height: 160px;
    margin-top: 30px;

    .channels {
      left: 10px;
      top: 10px;
      bottom: 10px;
      position: relative;
      height: 40px;
      width: 90%;
    }

    .channelsCombo {
      height: 40px;
      top: 35px;
      position: relative;
      font-weight: 400;
      font-size: 14px;
    }

    .label {
      color: #152935;
      font-family: RedHatText;
      font-size: 0.8rem;
      font-weight: bold;
      line-height: 18px;
      text-align: left;
    }

    .subscription {
      left: 10px;
      top: 5px;
      position: absolute;
    }

    .pagination {
      left: 10px;
      top: 105px;
      position: absolute;
    }

    .resourcePaging {
      display: flex;
      margin-top: 25px;
      margin-bottom: 5px;
    }

    .mainPagination {
      margin-left: 10px;
      top: 5px;
    }

    .show-subscription-pages-icon {
      align-items: center;
    }

    .channel-controls-help-icon {
      fill: #0066cc;
      margin-left: 4px;
      cursor: pointer;
    }

    .pageInput {
      align-items: center;
      width: 30px;
      height: 25px;
      left: 5px;
      right: 5px;
      top: 20px;
    }

    .pageLabel {
      margin-left: 5px;
      margin-right: 10px;
    }

    .labelLink {
      cursor: pointer;
    }

    .channel-control {
      padding: 2px 0 2px 3px;
      position: relative;
      color: #152935;
      line-height: 10px;

      &-subscripion {
        font-size: 1rem;
        font-weight: bold;
      }

      &-channel {
        font-size: 10px;
        font-weight: 600;
      }

      &-start {
        font-size: 0.3rem;
        font-weight: 600;
      }

      &-end {
        font-size: 8px;
      }

      &:hover {
        cursor: pointer;
        background-color: #f3f7fb;
      }

      &.selected {
        border-left: 4px solid #3d70b2;
        background-color: #f3f7fb;
      }
    }
  }

  .diagramViewerDiagram {
    position: relative;
    flex-grow: 1;

    .diagramViewerContainerContainer {
      width: 100%;
      height: calc(100vh - 240px);
      overflow: hidden;
      position: relative;

      .secondaryLoad {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &.scrolled {
        overflow-y: auto;
        overflow-x: hidden;
      }

      .diagramViewerContainer {
        width: 100%;
      }

      .layoutLoadingContainer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

/********************************************
  ***   HYBRID RESOURCE/TOPOLOGY PAGE ******
  ********************************************/

.resourceDiagramContainer {
  position: relative;

  .diagramViewerDiagram {
    .diagramViewerContainerContainer {
      width: 100%;
      height: calc(100vh - 220px);
      background-color: #fff;
      position: relative;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
      overflow: hidden;

      .secondaryLoad {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &.scrolled {
        overflow-y: auto;
        overflow-x: hidden;
      }

      .diagramViewerContainer {
        margin-right: 0;
      }

      .bx--inline-notification--error {
        position: absolute;
        top: 16px;
        right: 16px;
      }
    }
  }
}

.diagramViewerDiagram {
  .diagramRefreshContainer {
    position: absolute;
    top: 32px;
    right: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;

    .bx--loading--small {
      width: 1rem;
      height: 1rem;
      margin: -2px 0;
      visibility: hidden;
    }

    &.refreshing {
      .bx--loading--small {
        visibility: visible;
      }
    }
  }

  .diagramTitle {
    position: absolute;
    z-index: 1000;
    font-size: 28px;
    font-weight: 600;
    color: #80808080;
    left: 50%;
    transform: translateX(-50%);
    top: 16px;
  }
}

.diagramViewerContainer {
  .hub-label {
    font-weight: bold;
  }

  &.search-mode {
    .matched {
      fill: #d8124b;
      stroke-width: 0;
    }

    .hub-label {
      font-weight: normal;
    }
  }
}

/********************************************
  *****  SHOW FILTER BAR  *****
  ********************************************/
.topologyPage {
  .filter-bar {
    visibility: hidden;
  }
}

.topologyPage.first-load {
  .filter-bar {
    visibility: visible;
  }
}

.topologyTab {
  margin: 0 .5rem 0 .5rem;

  .topology-type-filter-bar {
    visibility: hidden;
  }

  .topology-diagram-toolbar {
    position: fixed;
    top: calc(#{$secondary-header-top} + 10px);
    right: 30px;
    z-index: 1001;
    background-color: $color__white;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .no-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 20rem;

    .no-information-icon {
      width: 175px;
      height: 240px;
    }

    .no-information-title {
      font-weight: bold;
      margin-bottom: 9px;
      font-size: 18px;
      text-align: center;
      color: $mcm_color_blue;
    }

    .no-information-detail {
      font-weight: 300;
      font-size: 14px;
      font-style: italic;
      text-align: center;
      line-height: 1.2;
      color: $color__navy-gray-6;
    }
  }
}

.topologyTab.first-load.diagram-shown {
  .topology-type-filter-bar {
    visibility: visible;
    height: 100%;
  }
}

.title {
  text {
    text-anchor: middle;
    fill: $color__navy-gray-4;
    cursor: default;
  }
}

.topologyNoCluster {
  margin-top: 54px;
}

svg.topologyDiagram {
  height: 100%;
  width: 100%;
}

.showPagesTooltip {
  line-height: 21px;
  font-size: 14px;
}

