<div id="root"></div>

:root {
  --br: 15px;
  text-align: center;
  color: white;
  background: #f06d06;
  padding: 1rem;
}

body {
  background: #222;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1rem;
}
h1 {
  font-family: 'Spectral', serif;
  font-size: calc(1rem + 3.3vw);
}

input {
  width: 100%;
  margin: 0 0 1rem 0;
}

.br-all {
  border-radius: var(--br);
}
.br-top-left {
  border-top-left-radius: var(--br);
}
.br-top-right {
  border-top-right-radius: var(--br);
}
.br-bottom-left {
  border-bottom-left-radius: var(--br);
}
.br-bottom-right {
  border-bottom-right-radius: var(--br);
}

.br-four-value {
  border-radius: var(--br) calc(var(--br)*2) calc(var(--br)*3) calc(var(--br)/2);
}
.br-three-value {
  border-radius: var(--br) calc(var(--br)*2) calc(var(--br)*3);
}
.br-two-value {
  border-radius: var(--br) calc(var(--br)*2);
}
.br-slash-one {
  border-radius: var(--br)/calc(var(--br)*3);
}
.br-slash-two {
  border-radius: calc(var(--br)*3)/var(--br);
}
.br-slash-three {
  border-radius: calc(var(--br)*4) calc(var(--br)*3) calc(var(--br)*2) calc(var(--br)*1)/calc(var(--br)*1) calc(var(--br)*2) calc(var(--br)*3) calc(var(--br)*4);
}

.box {
  background: white;
  color: #222;
  height: 100px;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 1rem;
  @media (max-width: 550px) {
    margin-bottom: 2rem;
  }
}
.allBoxes {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 3rem;
  .br-four-value {
    grid-column-start: 3;
    grid-column-end: -1;
    grid-row-start: 1;
  }
  .br-all {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
  }
  .br-slash-three {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  @media (max-width: 1000px) {
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    .br-four-value {
      grid-column-start: 1;
      grid-column-end: -1;
      grid-row-start: auto;
    }
    .br-all {
      grid-column-end: 1;
      grid-column-end: -1;
      grid-row-start: auto;
    }
  }
  @media (max-width: 550px) {
    display: block;
  }
}

class Box extends React.Component {
  render() {
    
    let theClass = this.props.theClass;
    
    let theClasses = classNames({ 
      'box': true,
      [`${theClass}`]: true
    });
    
    return(
      <div className={theClasses}>
        {this.props.label}: {this.props.value}px;
        
        <span class="tl"></span>
        <span class="tr"></span>
        <span class="bl"></span>
        <span class="br"></span>
      </div>
    );
  }
}

class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      value: 15
    };

    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: event.target.value});
    document.documentElement.style.setProperty("--br", event.target.value + "px");
  }
  
  render() {
    
    let fourValueValue = this.state.value + "px " + this.state.value * 2 + "px " + this.state.value * 3 + "px " + this.state.value / 2;
    let threeValueValue = this.state.value + "px " + this.state.value * 2 + "px " + this.state.value * 3;
    let twoValueValue = this.state.value + "px " + this.state.value * 2;
    let slashSyntaxOne = this.state.value + "px/" + this.state.value * 3;
    let slashSyntaxTwo = this.state.value * 3 + "px/" + this.state.value;
    let slashSyntaxThree = this.state.value * 4 + "px " + this.state.value * 3 + "px " + this.state.value * 2 + "px " + this.state.value + "px/" + this.state.value + "px " + this.state.value * 2 + "px " + this.state.value * 3 + "px " + this.state.value * 4;
    
    return(
      <div>
        
        <h1>The Border Radii</h1>

        <input type="range" id="br-value" min="0" max="30" onChange={this.handleChange} value={this.state.value} />
        
        <div className="allBoxes">
          <Box theClass="br-all" value={this.state.value} label="border-radius" />
          <Box theClass="br-top-left" value={this.state.value} label="border-top-left-radius" />
          <Box theClass="br-top-right" value={this.state.value} label="border-top-right-radius" />
          <Box theClass="br-bottom-left" value={this.state.value} label="border-bottom-left-radius" />
          <Box theClass="br-bottom-right" value={this.state.value} label="border-bottom-right-radius" />
          <Box theClass="br-four-value" value={fourValueValue} label="border-radius" />
          <Box theClass="br-two-value" value={twoValueValue} label="border-radius" />
          <Box theClass="br-three-value" value={threeValueValue} label="border-radius" />
          <Box theClass="br-slash-one" value={slashSyntaxOne} label="border-radius" />
          <Box theClass="br-slash-two" value={slashSyntaxTwo} label="border-radius" />
          <Box theClass="br-slash-three" value={slashSyntaxThree} label="border-radius" />
        </div>

      </div>
    );
  }  
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);