@mixin input-mixin() {
  width: 100%;
  margin-top: 12px;
  font-size: 15px;
  color: rgb(51, 51, 51);
  padding: 0;
  border-width: 0 0 1px;
  border-top-style: initial;
  border-right-style: initial;
  border-bottom-style: solid;
  border-left-style: initial;
  border-top-color: initial;
  border-right-color: initial;
  border-left-color: initial;
  border-bottom-color: rgb(238, 238, 238);
  border-image: initial;
  outline: none;
  height: 30px;
}

& {
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 10px, rgba(0, 0, 0, 0.16) 0 2px 5px;
  border-radius: 2px;
  background: white;
  width: 98px;
  height: 98px;
  padding: 16px;

  &__rgb-container {
    display: flex;
    margin-right: -10px;
    margin-top: 11px;
  }

  &__rgb-editable-text {
    flex: 1 1 0;
    padding-right: 10px;
  }

  &__label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    color: rgb(153, 153, 153);
    text-transform: capitalize;
  }

  &__input-hex {
    @include input-mixin();
    border-width: 0 0 2px;
  }

  &__input {
    @include input-mixin();
  }
}