@use "../../../../../../../global/theme/mixins/editor";

app-deck-fonts {
  div.container {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 32px) / 3));
    grid-template-rows: auto;

    @media screen and (max-width: 720px) {
      grid-template-columns: repeat(2, 50%);
    }

    width: calc(100% - 16px);

    padding: 0 16px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;

    margin-top: 24px;

    div.item {
      border-radius: 8px;
      border: 2px solid var(--ion-color-light);

      font-size: var(--font-size-normal);
      overflow: hidden;

      width: 100%;
      height: 5rem;

      &.selected {
        @include editor.selected;
      }

      deckgo-slide-title {
        --slide-padding-start: 4px;
        --slide-padding-bottom: 4px;
        --slide-padding-top: 4px;
        --slide-padding-end: 4px;

        --slide-height: 100%;

        p[slot="title"] {
          margin: 0;
          font-weight: normal;

          &.default {
            font-family: var(--font-family-default);
          }
        }
      }
    }
  }
}
