.templates {
  overflow-y: auto;
  padding-top: 14px;
  height: 100%;
  :global {
    .template-card-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-gap: 10px;
      padding: 10px 10px 10px 0;
    }

    .template-card {
      height: 180px;
      .image {
        width: 100%;
        height: 140px;
        border: solid 1px var(--borderColor);
        border-radius: var(--borderRadius);
        transition: var(--transition);
        background-color: var(--backgroundColorL1);
        margin-bottom: 10px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
      &:hover {
        .image {
          background-color: var(--backgroundColorL2);
        }
      }

      .name {
        height: 26px;
        padding: 0 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
      }
    }
  }
}

.templateModal {
  :global {
    .image {
      width: 100%;
      height: 140px;
      border: solid 1px var(--borderColor);
      border-radius: var(--borderRadius);
      transition: var(--transition);
      background-color: var(--backgroundColorL1);
      margin-bottom: 10px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}