@import 'frost-app';
@import 'frost-theme';

.demo {
  display: flex;
  flex-direction: row;
  margin: 0 20px;
  padding-top: 20px;

  > div + div {
    margin-left: 40px;
  }
}

.demo-component {
  min-width: 315px;

  div:first-of-type {
    margin-top: 0;
  }

  div:last-of-type {
    margin-bottom: 0;
  }
}

.slot {
  margin: 20px 0;
  padding: 20px;

  input {
    display: block;
    padding: 5px;
  }
}

.grey {
  background-color: #9e9e9e;
}

.blue {
  background-color: #2196f3;
}

.pink {
  background-color: #e91e63;
}

.pink-2 {
  background-color: #ec407a;
}

.cyan {
  background-color: #00bcd4;
}

.green {
  background-color: #4caf50;
}

.amber {
  background-color: #ffc107;
}

.red {
  background-color: #f44336;
}

.purple {
  background-color: #9c27b0;
}

.hljs {
  font-size: 11px;
}

.code {
  display: flex;
  flex-direction: row;
}

.outline {
  width: 5px;
  margin: 10px 0;

  div {
    width: 100%;
  }

  &.component {
    .setup { height: 5%; }
    .basic { height: 11%; }
    .conditional { height: 20%; }
    .params { height: 17%; }
    .chained { height: 16%; }
    .actions { height: 15%; }
    .contextual { height: 16%; }
  }

  &.instance {
    .setup.top { height: 11%; }
    .basic { height: 9%; }
    .conditional { height: 12%; }
    .params { height: 30%; }
    .chained { height: 8%; }
    .actions { height: 17%; }
    .contextual { height: 9%; }
    .setup.bottom { height: 4%; }
  }
}
