// Place all the styles related to the PresetColors controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/


.preset-color-list {
  display: flex;
  flex-flow: row wrap;
}

.preset-color {
  height: 4em;
  width: 4em;
  border-radius: 2px;
  margin-right: 5px;
  cursor: pointer;
  flex: 1;

  &:last-child {
    margin-right: 0px;
  }

  > button {
    display: none;
    font-size: 1.5em;
    margin-top: -3px;
    cursor: pointer;

    &:hover {
      color: white;
    }
  }

  &:hover {
    opacity: 0.6;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.6);

    > button {
      display: inherit;
    }
  }
}

// Place all the styles related to the PresetColors controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/


.preset-color-list {
  display: flex;
  flex-flow: row wrap;
}

.preset-color {
  height: 4em;
  width: 4em;
  border-radius: 2px;
  margin-right: 5px;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  flex: 1;

  &:last-child {
    margin-right: 0px;
  }

  > button {
    display: none;
    font-size: 1.5em;
    margin-top: -3px;
    margin-right: 1px;
    cursor: pointer;
    align-self: flex-start;

    &:hover {
      color: white;
    }
  }

  &:hover {
    opacity: 0.6;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.6);

    > button {
      display: inherit;
    }
  }
}

Move remove button to the right of preset color
Move remove button to the right of preset color
