import styled from "styled-components";

export const DecksOuterWrapper = styled.div`
  height: 100%;
  width: 100%;
  flex-grow: 1;
  padding-top: calc(var(--toolbar-height));
`;

export const DecksInnerWrapper = styled.div`
  width: 100%;
  height: 100%;
  padding: 16px;
  .flex {
    gap: 16px;
    display: flex;
    flex-flow: row wrap;
  }
  gap: 16px;
  display: flex;
  flex-flow: row wrap;
  overflow-x: hidden;
  overflow-y: auto;
  wired-card {
    overflow: hidden;
    width: var(--card-size);
    height: var(--card-size);
    .deck {
      padding: 0.5rem;
    }
    .title {
      margin-bottom: 0.5rem;
      font-size: 1.5em;
      font-weight: bold;
    }
    .count {
      color: gray;
    }
    .centered {
      width: calc(var(--card-size) - 20px);
      height: calc(var(--card-size) - 20px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
`;