@use "../../../../global/theme/mixins/deck";
@use "../../../../global/theme/mixins/dashboard";
@use "../../../../global/theme/mixins/page";

app-decks {
  @import "node_modules/@deckdeckgo/styles/css/deck";

  main {
    @include page.input-colors;

    div.container.loading {
      article {
        visibility: hidden;
        opacity: 0;
      }
    }

    article {
      visibility: visible;
      opacity: 1;

      transition: opacity 0.1s ease-out;

      aside {
        @include dashboard.actions;

        app-dashboard-actions {
          grid-column-start: 2;
          grid-column-end: 3;
          grid-row-start: 1;
          grid-row-end: 3;
        }
      }
    }

    deckgo-deck {
      background: white;

      pointer-events: none;

      @include deck.padding;
    }

    @include dashboard.searchbar;

    div.container {
      @include dashboard.grid;

      ion-card.item {
        position: relative;

        width: var(--card-width);
        height: calc(var(--card-width) * 9 / 16);

        cursor: pointer;
      }
    }
  }
}
