@import "../../../style/mixin.scss";

@include export-module('cco-catalog-layout') {
  .co-catalog {
    .catalog-dialog {
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      z-index: 10;
      overflow: hidden;
      box-sizing: border-box;

      .catalog-container {
        background-color: var(--co-inphoto--dialog-background-color);
        width: 90vw;
        height: 90vh;
        max-height: 1000px;
        margin: 5vh auto;
        border-radius: 10px;
        overflow: hidden;

        .catalog-dialog-wrapper {
          display: flex;
          align-items: center;
          padding: 10px;

          .back-button {
            display: flex;
            align-items: center;
            cursor: pointer;
          }

          .close-button {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-left: auto;
          }
        }

        .catalog-body {
          box-sizing: border-box;
          padding: 20px;
          overflow-y: scroll;
          max-height: 100%;

          .catalog-tile-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(10px, 150px));
            overflow: hidden;
            padding: 0;
            grid-gap: 10px;

            .catalog-tile {
              cursor: pointer;
              position: relative;
              display: flex;
              flex-direction: column;
              height: 100%;
              width: 100%;
              min-height: 150px;

              p {
                display: block;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: var(--ca-font-size);
                font-weight: bold;
                text-shadow: none;
                text-transform: capitalize;
                margin: 10px 0;
              }
            }
          }
        }
      }
    }
  }
}
