// Presets

.presets__presets {
  ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    // flex-direction: column;

    // @media (max-width: 249px) {
    //   flex-direction: column;
    // }

    @media (max-width: 419px) {
      flex-direction: column;
    }
  }

  li {
    &:nth-of-type(2) {
      // position: relative;

      // @media (max-width: 249px) {
      //   margin-top: remy(16px);
      //   margin-bottom: remy(16px);
      // }

      @media (min-width: 420px) {
        margin-right: remy(16px);
        margin-left: remy(16px);
      }

      @media (max-width: 419px) {
        margin-top: remy(16px);
        margin-bottom: remy(16px);
      }

      // &:before,
      // &:after {
      //   position: absolute;
      //
      //   @media (max-width: 249px) {
      //     right: 0;
      //     left: 0;
      //     content: '\2014';
      //   }
      //
      //   @media (min-width: 250px) {
      //     top: 0;
      //     content: '|';
      //   }
      // }

      // &:before {
      //   @media (max-width: 249px) {
      //     top: remy(-17px);
      //   }
      //
      //   @media (min-width: 250px) {
      //     left: remy(-10px);
      //   }
      // }
      //
      // &:after {
      //   @media (max-width: 249px) {
      //     bottom: remy(-17px);
      //   }
      //
      //   @media (min-width: 250px) {
      //     right: remy(-10px);
      //   }
      // }
    }
  }
}

.preset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  font-weight: bold;
  text-align: center;
  color: #888;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
  transition: all .25s ease-in-out;

  &:hover,
  &--active,
  &--active:hover {
    color: $gradient-purple-fallback;
    border-color: $gradient-purple-fallback;
    box-shadow: 0 10px 50px rgba(0, 0, 0, .25);
  }
}

.preset__time,
.preset__unit {
  display: block;
}