@import "../../variables.scss";

.playground {
	position: relative;
  flex: 10 0 auto;
  padding: 5px;
	margin: 20px 5px;
  background-color: $figma-white;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  outline-width: 2px;
  outline-style: solid;
  outline-color: transparent;
  &:hover {
    outline-color: $figma-blue;
		.playground-title {
			color: $figma-blue;
		}
  }

	.playground-title {
		position: absolute;
		top: calc(-1em - 5px);
		left: 0;
		color: $figma-black-3;
	}

  > section {
    flex: 1 1 300px;
    margin: 5px;
    display: flex;
  }

  .playground-controls {
    display: flex;
    flex-direction: column;

    .control-header {
      display: flex;
      align-items: center;
    }
    .control-property {
      padding: 5px 5px 10px 5px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.03);
      }
    }
  }
  .playground-result {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
