@import '../styles/_variables.scss';

.main {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 110px auto;
  grid-row-gap: 16px;
  grid-template-columns: auto auto auto 30px;
  grid-column-gap: 10px;

  .header {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
  }
  .hue {
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
  }

  .saturation {
    grid-column: 1 / span 3;
    grid-row: 2 / span 1;
  }

  .comparison {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }

  .format-and-text-container {
    grid-column: 2 / span 3;
    grid-row: 3 / span 1;

    display: flex;

    .eye {
      opacity: .5;
      font-size: 15px;
      flex: none;
      width: 39px;
    }
  

    .format {
      width: 30%;
      min-width: 70px;
      font-size: 14px;
      margin-inline-end: 8px;
    }

    .color-text {
      position: relative;
      width: 70%;

      input {
        width: 100%;
        height: 32px;
        text-align: center;
      }
    }
  }
}