@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
@import url('https://fonts.googleapis.com/css?family=Play:400,700');
@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500');
@import './constants.scss';
@import './xterm.scss';

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: $dark-blue;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

#root {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.App {
  height: 100%;
}

h2 {
  margin: 0;
}

a {
  color: $blue-kubernetes;
  cursor: pointer;
  text-decoration: none;
  font: $link;
}

textarea {
  border-style: none;
  height: 32px;
  width: 100%;
  margin-right: 15px;
  padding: 0 8px;
  font: $button-text;
  color: $blue-dark-2;
  border-radius: 3px;
  box-shadow: $shadow-button;
  max-width: 100%;

  &::placeholder {
    color: rgba(34, 51, 102, 0.5);
  }
}
.display-none {
  display: none;
}

input,
textarea {
  background-color: white;
}

article {
  margin: 0 auto;
  max-width: 650px;
}
button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: white;
  display: flex;
  // padding: 5px 7px;
}
button:active {
  background-color: $sky-darker;
  transition: background-color 0.3s;
  border-radius: 5px;
}
button:focus {
  outline: none;
  border-radius: 5px;
}

.bold {
  font-weight: 700;
}

.hidden {
  display: none;
}

.button-bar {
  height: 36px;
  background: $verylight-blue;
  border-radius: 0px 0px 5px 5px;
  display: flex;
  align-items: center;
  margin-top: 15px;

  ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    padding: 0;
    height: 100%;

    li {
      height: 100%;
      font-size: 16px;
      background-image: url(../images/space-button-separation.svg), url(../images/space-button-separation.svg);
      background-repeat: no-repeat;
      background-position: left bottom, right bottom;

      &:first-of-type {
        background-image: url(../images/space-button-separation.svg);
        background-position: right bottom;
      }

      &:last-of-type {
        background-image: url(../images/space-button-separation.svg);
        background-position: left bottom;
      }

      &.status-btn {
        .status-warning {
          color: $red;
          display: flex;
          align-items: center;
          font-weight: 600;

          .icon {
            background-image: url(../images/icon-warning.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 5px;
          }
        }
      }

      a {
        padding: 0 20px;
        font-size: 14px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.selected {
          background-color: $lighter-blue;
        }

        &:hover {
          background-color: $lighter-blue;
        }
      }

      &.disabled {
        opacity: 0.5;
        background-color: $lighter-blue;
        a:hover {
          opacity: 1;
          cursor: unset;
        }
      }
    }
  }
}
