intercity/intercity-next

.servers {
  .empty-state {
    .box {
      h3, h4 {
        color: $grey-dark;
      }
      .icon {
        width: 100px;
        height: 100px;
        * {
          fill: $grey-light;
        }
      }
    }
  }

  .server {
    @extend .column;
    @extend .is-3;
    .card {
      border-top: 5px solid;

      .resources {
        img {
          width: 32px;
          opacity: 0.3;
        }
      }

      .address {
        font-size: 1.2em;
      }

      &.server-up {
        border-color: $green;

        .status {
          background: $green;
          color: #ffffff;
        }
      }

      &.server-down {
        border-color: $red;

        .status {
          background: $red;
          color: #ffffff;
        }
      }

      &.server-setup_not_finished {
        border-color: $yellow;

        .status {
          background: $yellow;
        }
      }

      .card-header {
        padding-top: 20px;
        .status {
          position: absolute;
          top: 0;
          left: 0;
          padding: 5px;
          padding-top: 0px;
          font-size: 0.8em;
          border-radius: 0 0 5px 0px;
        }

        .card-header-title {
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .ssh-key {
    @extend .box;
    background: $grey-lighter;
    pre {
      padding: 20px;
      width: 100%;
      overflow-x: scroll;
    }
    .table {
      background: $grey-lighter;
    }
  }

  .installing {
    .step {
      text-align: center;
      @extend .column;

      @include tablet {
        border-right: 1px solid $grey-lighter;

        &:last-child {
          border-right: 0px;
        }
      }

      @include mobile {
        border-bottom: 1px solid $grey-lighter;
      }

      .step-number {
        font-size: 2em;
        font-weight: bold;
      }


      &.is-success {
        background: $green;
        color: white;
      }
    }
  }
}

.highlight {
  position: relative;
  .copy {
    background: white;
    border: solid $border;;
    border-width: 0 0 1px 1px;
    color: $text-light;
    position: absolute;
    right: 0;
    top: 0;
  }
}