tail-wind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .base-button {
    @apply text-gray-800 
      hover:bg-gray-100  
      font-semibold
      border 
      border-gray-400 
      rounded 
      shadow
      p-[0px];
  }
}

button.base-button > a {
  test_background-color: yellow;
  test_opacity: 0.5;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: -1px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 2px;
  margin-bottom: -2px;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
}

.base-view {
  @apply bg-gray-200;
}

.base-radio-label {
  @apply pr-2 
    inline-block;
}

/*      https://jfly.uni-koeln.de/color/#pallet  -- color blind 
  orange_41         230,159,0    #e69f00
  sky_blue_202      86,180,233
  bluish-green_164  0,158,115     #009e73
  yellow_56         240,228,66
  blue_202          0,114,178
  vermillion_27     213,94,0       #d55e00
  red_purple_326    204,121,167    #cc79a7

  blue_202 always is clickable

Timer colors:
  Recipe Timer, count down
    fine = bluish-green_164
    over = red_purple_326

  Extra Timer, count up
    always = orange_41

*/

button.base-button > a:hover {
  color: rgb(0, 158, 115); /* bluish-green_164 */
}

.base-edit {
  background-color: rgba(0, 158, 115, 0.2); /* bluish-green_164  x 0.2 */
}

.base-link {
  color: rgba(0, 114, 178, 0.8); /* blue_202 x 0.8*/
  text-decoration: underline;
}

.base-link:hover {
  color: rgb(0, 114, 178); /* blue_202 */
}

button.base-button.cut-red > a:hover {
  color: rgb(204, 121, 167); /* red_purple_326 */
}

button.base-button > a.delete-hover-red:hover {
  color: rgb(204, 121, 167); /* red_purple_326 */
}

.flaticon {
  font-size: 10px;
  color: rgb(0, 114, 178); /* blue_202 */
}

.flaticon-2 {
  font-size: 10px;
  color: rgb(0, 158, 115); /* bluish-green_164 */
}