.color-small-cell {
  width: 70px;
  height: 70px;
  margin: 0 5px;
}

.ral {
  &-info {
    width: calc(100% - 70px);
    padding: 0 10px;
    overflow: hidden;
  }

  &-color-ral {
    font-weight: bold;
  }

  &-color-name {
    font-size: small;

    // Truncate the color description to keep color tile width consistent
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

mat-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &.color-variants {
    left: 24px;
    top: 29px;
    transform: none;
  }
}

.mat-grid-list {
  padding: 10px 0;
}

.mat-grid-tile .mat-grid-tile-header.color-header {
  display: block;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  top: 8px;
  left: 8px;
  text-align: center;
  background: transparent;
}
