:host{
      --icon-Background-Color: #333333 ;
      --color-yellow: 255, 202, 58 ;
      --color-blue: 25, 130, 196 ;
      --color-green: 138, 201, 38 ;
      --color-purple: 106, 76, 147 ;
  }

  .card-content {
    width: 100%;
    margin: 0 !important;
  }

  .large .bubble-button-card-container {
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    overflow: hidden !important;
    max-height: 170px;
    max-width: 170px;
    margin-right: 7.5px;
    border: 1px solid #1A1A1A;
  }

  .bubble-button-card {
    display: grid;
    grid-template-areas:
      'n n n b'
      'l l l b'
      'i i . b'
      'i i . b';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
    justify-items: center;
  }

  .bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === 'on' ? '#1A1A1A' : 'rgb(0,0,0)'} !important;
  }

  .bubble-icon-container {
    grid-area: i;
    border-radius: 45% !important;
    width: 139px !important;
    height: 139px !important;
    max-width: 139px !important;
    max-height: 139px !important;
    position: absolute !important;
    place-self: center !important;
    margin: 60px 60px 0px 0px !important;
    padding: 0px, 0px, 0px, 0px !important;
    background-color: ${state === 'on' ? '#EEE8D5' : '#333333'} !important;
  }

  .bubble-icon {
    width: 40%;
    position: absolute !important;
    right: 13px;
    top: 18px;
    --mdc-icon-size: 46px !important;
    opacity: 1 !important;
    color: black !important;
  }

  .bubble-name-container {
    grid-area: n;
    justify-self: start;
    margin-left: 20px;
    max-width: calc(100% -(12px + 0px));
  }

  .bubble-name {
    font-weight: 500;
    font-size: 16px;
  }

  .bubble-state {
    font-weight: 300;
    font-size: 16px;
  }

  .large .bubble-sub-button-container {
    grid-area: b;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc((100% - 4 * 36px)/5) !important;
    justify-content: flex-start;
    width: auto !important;
    right: 9px !important;
    padding-right: 0px !important;
    height: 100% !important;
    top: 13px !important;
  }

  .bubble-sub-button-1 {
    background-color: ${hass.states['fan.xxx'].state === 'on' ? '#6C71C4' : '#333333'} !important;
  }

  .bubble-sub-button-2 {
    background-color: ${hass.states['input_boolean.xxx'].state === 'on' ? '#2AA198' : '#333333'} !important;
  }

  .bubble-sub-button-3 {
    background-color: ${hass.states['switch.xxx'].state === 'on' ? '#E54666' : '#333333'} !important;
  }

  .large .bubble-sub-button {
    height: 36px !important;
  }
grid_options:
  columns: 6
  rows: 3