art-nouveau:
  card-mod-theme: art-nouveau

  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTR-Hllcy5CR5U90nMlW8bZA_VM7w4VlP2lZg&usqp=CAU")
  # https://es.vecteezy.com/arte-vectorial/685708-patron-de-granate-rojo-geometrico-art-deco-sin-costura-simple

  bg-color1: rgb(107, 14, 12)
  # bg-color2: rgb(182, 127, 82)
  bg-color2: rgb(232, 177, 132)
  # bg-color3: rgb(156, 108, 65)
  bg-color3: rgb(206, 158, 145)

  primary-color: var(--bg-color3)
  primary-text-color: var(--bg-color2)
  app-header-text-color: var(--bg-color2)
  app-toolbar-font-size: 32px
  switch-unchecked-button-color: var(--bg-color2)
  switch-unchecked-track-color: var(--bg-color3)
  switch-checked-track-color: var(--bg-color3)

  theme-card-background: rgba(0, 0, 0, 0.8)
  theme-card-border-radius: 10px 30px 10px
  theme-thick-border: 3px solid var(--bg-color3)
  theme-thin-border: 1px solid var(--bg-color3)

  ok-color: rgb(0, 80, 0)
  error-color: rgb(80, 0, 0)
  info-color: rgb(50, 50, 150)
  warning-color: rgb(100, 100, 0)

  paper-item-icon-active-color: var(--ok-color)

  shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
  shadow-2: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
  shadow-transition: all 0.3s cubic-bezier(.25,.8,.25,1)

  card-mod-sidebar: |
    :host {
      background: var(--background-image);
      border-right: var(--theme-thin-border) !important;
      --divider-color: var(--bg-color3);
    }
    :host([expanded]) {
      border-right: var(--theme-thick-border) !important;
      --item-border-radius: var(--theme-card-border-radius);
    }
    :host::before {
      background: var(--theme-card-background);
    }
    div.menu {
      background: var(--theme-card-background);
    }
    paper-icon-item[role=option], paper-icon-item[aria-role=option] {
      border: var(--theme-thick-border);
      border-radius: var(--item-border-radius);
      background: var(--theme-card-background);
      --sidebar-icon-color: var(--sidebar-selected-icon-color);
    }
    .iron-selected paper-icon-item {
      background: var(--theme-card-background);
    }

  card-mod-root: |
    ha-app-layout, div#view {
      background: var(--background-image);
      background-size: 300px;
    }
    app-header, div.header {
      background: var(--theme-card-background) !important;
      border-bottom: var(--theme-thick-border);
      padding-bottom: 3px;
      transform: none !important;
    }
    app-toolbar, div.toolbar {
      background: none !important;
      border-bottom: var(--theme-thin-border)
    }
    app-toolbar div[main-title] {
      font-variant: small-caps;
    }

  card-mod-view-yaml: |
    .: |
      hui-view {
        background: none !important;
      }
    "*:first-child$": |
      :host {
        background: none !important;
      }
      #badges {
        display: flex !important;
        justify-content: space-around;
      }
      #columns .column > * {
        margin: 32px 16px;
      }

  card-mod-card: |
    ha-card {
      background: var(--theme-card-background);
      background-size: 1000px;
      --ha-card-border-radius: var(--theme-card-border-radius);
      border: var(--theme-thick-border);
      box-shadow: var(--shadow-1);
      transition: var(--shadow-transition);
    }
    ha-card:hover {
      box-shadow: var(--shadow-2);
    }
    .card-header {
      text-align: center;
      display: block !important;
      font-variant: small-caps;
      border-bottom: 1px solid var(--bg-color3);
      margin-bottom: 24px;
      padding: 8px;
    }
    .card-header hui-entities-toggle {
      display: none;
    }
    ha-card.type-picture-entity .footer {
      top: 0px;
      bottom: unset;
      border-bottom: var(--theme-thin-border);
    }
    ha-card div.options {
      border: none;
    }

  card-mod-row: |
    :host {
      display: block;
      --paper-item-icon-color: {% if not states(config.entity) %} var(--warning-color);
        {% elif is_state(config.entity, 'undefined') %} var(--warning-color);
        {% elif is_state(config.entity, 'on') %} var(--ok-color);
        {% elif is_state(config.entity, 'open') %} var(--ok-color);
        {% elif is_state(config.entity, 'unlocked') %} var(--ok-color);
        {% elif is_state(config.entity, 'off') %} var(--error-color);
        {% elif is_state(config.entity, 'closed') %} var(--error-color);
        {% elif is_state(config.entity, 'locked') %} var(--error-color);
        {% else %} var(--info-color);
        {% endif %}
    }

  card-mod-glance: |
    :host {
      display: block;
      --paper-item-icon-color: {% if not states(config.entity) %} var(--warning-color);
        {% elif is_state(config.entity, 'undefined') %} var(--warning-color);
        {% elif is_state(config.entity, 'on') %} var(--ok-color);
        {% elif is_state(config.entity, 'open') %} var(--ok-color);
        {% elif is_state(config.entity, 'unlocked') %} var(--ok-color);
        {% elif is_state(config.entity, 'off') %} var(--error-color);
        {% elif is_state(config.entity, 'closed') %} var(--error-color);
        {% elif is_state(config.entity, 'locked') %} var(--error-color);
        {% else %} var(--info-color);
        {% endif %}
    }

  card-mod-badge-yaml: |
    .: |
      :host {
        display: inline-block;
        background: var(--theme-card-background);
        border-radius: var(--theme-card-border-radius);
        border: var(--theme-thick-border);
        padding: 8px;
        box-shadow: var(--ha-card-box-shadow);
        box-shadow: var(--shadow-1);
        transition: var(--shadow-transition);
      }
      :host(:hover) {
        box-shadow: var(--shadow-2);
      }

    ha-state-label-badge $ ha-label-badge $: |
      .badge-container .label-badge {
        color: var(--primary-text-color);
        border-radius: 8px 20px 8px 8px;
        --ha-label-badge-color: var(--bg-color3);
        background: {% if not states(config.entity) %} var(--warning-color);
          {% elif is_state(config.entity, 'undefined') %} var(--warning-color);
          {% elif is_state(config.entity, 'on') %} var(--ok-color);
          {% elif is_state(config.entity, 'open') %} var(--ok-color);
          {% elif is_state(config.entity, 'unlocked') %} var(--ok-color);
          {% elif is_state(config.entity, 'off') %} var(--error-color);
          {% elif is_state(config.entity, 'closed') %} var(--error-color);
          {% elif is_state(config.entity, 'locked') %} var(--error-color);
          {% else %} var(--info-color);
          {% endif %}
      }

  card-mod-more-info-yaml: |
    $: |
      :host {
        --paper-item-icon-color: {% if not states(config.entityId) %} var(--warning-color);
          {% elif is_state(config.entityId, 'undefined') %} var(--warning-color);
          {% elif is_state(config.entityId, 'on') %} var(--ok-color);
          {% elif is_state(config.entityId, 'open') %} var(--ok-color);
          {% elif is_state(config.entityId, 'unlocked') %} var(--ok-color);
          {% elif is_state(config.entityId, 'off') %} var(--error-color);
          {% elif is_state(config.entityId, 'closed') %} var(--error-color);
          {% elif is_state(config.entityId, 'locked') %} var(--error-color);
          {% else %} var(--info-color);
          {% endif %}
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: var(--theme-card-background);
        border-radius: var(--theme-card-border-radius);
        border: var(--theme-thick-border);
      }
    ha-header-bar:
      .: |
        div.main-title {
          font-variant: small-caps;
        }
      $: |
        .mdc-top-app-bar {
          background: none !important;
          border-bottom: var(--theme-thin-border);
        }