/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

$connectionHeaderBg: #D9DCE3;

.root {

}
.connectionHead {
  background-color: $connectionHeaderBg;
  margin-top: 64px;
  padding: 16px;
  .connectionTypeImg {
    margin-right: 64px;
    float: left;
  }
  .connectionInfo {
    float: left;
    .connectionStatus {
      width: 80px;
      border-radius: 4px;
      color: #FFF;
      line-height: 16px;
      display: inline-block;
      font-size: 10px;
      text-align: center;
      &:global(.PAUSED) {
        background-color: $gray;
      }
    }
    .connectionType {
      width: 80px;
      background-color: #FFF;
      border-radius: 4px;
      line-height: 14px;
      font-size: 10px;
      text-align: center;
      display: inline-block;
      text-transform: uppercase;
      border: 1px solid $blue;
      color: $blue;
      margin-right: 16px;
      &:global(.replica) {
        border: 1px solid $color-replica;
        color: $color-replica;
      }
    }
  }
  .connectionActions {
    float: right;
    margin-top: 16px;
    button {
      margin-left: 16px;
      max-width: 96px;
    }
    :global(.Dropdown-root) {
      width: 160px;
      float: left;
      margin-right: 16px;
    }
  }
  &:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
  }
}

.container {
  margin: 0 auto;
  padding: 0;
  max-width: $narrow-content-width;
}
.sidebar {
  padding-top: 32px;
  width: 128px;
  float: left;
  a {
    display: block;
    /* Tasks: */
    font-weight: $weight-regular;
    font-size: 16px;
    color: $gray;
    text-decoration: none;
    margin-bottom: 16px;
    &:global(.active) {
      color: $blue;
    }
  }
}
.content {
  padding-top: 8px;
  float: left;
  width: 800px;
  padding-bottom: 32px;
  .connectionTypeImg {
    margin-bottom: 16px;
  }
}

.buttons {
  button {
    margin-bottom: 16px;
  }
  .leftSide {
    float: left;
  }
  .rightSide {
    float: right;
  }
}
