
@import "../common.scss";

input {
  width: calc(100% - 210px);
  margin-right: 8px;
  color: $veryLightPurple;
  background-color: transparent;
  font-size: 1.2em;
  outline: none; 
  border: none;
  border-bottom: 1px solid;
  border-bottom-color: $purpleMedium;
}

iframe {
  color: $veryLightPurple;
  background-color: #9f9f9f;
}

.target {
  background-color: $darkBlue;
  color: $veryLightPurple;
  padding-left: 48px;
  font-size: 1.2em;
}

.open-tab-link {
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 8px;
  border-radius: 5px;
  cursor: pointer;
  color: $darkBlue;
  background-color: $purpleMedium;
}
 
  input {
    font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  }

      .actions{
        background-color:$darkBlue;
        color: $veryLightPurple;
        height: 100%;
        border-top: 1px solid $purpleMedium;
        .buttons{
          padding: 8px;
        }
        .iframe{
          height: calc(100% - 180px);
          padding: 20px
        }
      }

  .buttons{
    display: flex;
    
    flex-wrap: wrap;
    >div{
      cursor: pointer;
      height: 14px;
      border: 1px solid $purpleMedium;
      &:hover{
        background-color: $purpleMedium;
      }
      border-radius: 8px;
      flex-grow: 1;
      margin-right: 4px;
      margin-bottom: 4px;
      text-align: center;
      flex-grow: 0;
      padding: 4px 4px;
    }

  }