@import '../../dist/clsp-player.css';

@import '../styles/utils.reset.css';
@import '../styles/utils.demo-theme.css';

.content {
  display: flex;
  width: 100%;
  height: 100%;

  .controls {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    padding: 0.5em;
    width: 25%;
    overflow-y: auto;

    section {
      display: flex;
      flex-direction: column;
      border: 1px solid white;
      padding: 0.75em;

      h2 {
        margin: 0;
        padding: 0.5em 0;
      }

      .control-group {
        display: flex;
        flex-direction: column;

        & > * {
          margin: 0.25em 0;
        }

        input {
          flex-grow: 1;
          flex-shrink: 0;
        }

        button {
          text-align: start;
          margin-right: auto;
          padding-left: 1em;
          padding-right: 1em;
        }
      }
    }
  }

  .stream-container {
    flex-grow: 1;
    flex-shrink: 1;
  }
}