/* tiledlist.st.css  */
@namespace "TiledList";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --font-family-base,
    --spacing-unit,
    --color-focus,
    --color-accent-1,
    color-black,
    color-white;
}

:import {
  -st-from: "../../components/TiledList/tiledlist.st.css";
  -st-default: TiledList;
  -st-named:
    itemTitle;
}

:import {
  -st-from: "../../components/Container/container.st.css";
  -st-default: Container;
}

:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

@st-scope Base {
  TiledList {
    --tiled-list-container-border: 12px solid var(--color-accent-1);
    --tiled-list-item-title-bg: var(--color-accent-1);
    text-align: center;
    font-family: var(--font-family-base);
    padding-bottom: calc(var(--spacing-unit) * 3);
  }

  TiledList Container {
    border: var(--tiled-list-container-border);
    padding-bottom: calc(var(--spacing-unit) * 3);
  }

  TiledList::list {
    padding: 0;
    margin-top: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  TiledList::listItem {
    width: 50%;
    margin-bottom: 1px;
  }

  TiledList Text.itemTitle {
    background-color: var(--tiled-list-item-title-bg);
    padding: var(--spacing-unit);
    color: value(color-white);
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
  }

  TiledList::anchor:hover .itemTitle {
    background-color: value(color-black);
  }

  TiledList::anchor:hover .itemTitle {
    background-color: value(color-black);
  }

  TiledList::title {
    text-align: start;
    margin-top: 1em;
    margin-bottom: calc(1em + var(--spacing-unit));
    font-weight: 300;
  }

  TiledList::anchor {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    margin-right: 1px;
  }

  TiledList::anchor:focus {
    outline: 3px solid var(--color-focus);
  }

  TiledList::anchor:hover {
    text-decoration: underline;
    color: value(color-white);
  }

  TiledList::cta {
    width: 100%;
  }
}

@media value(tablet) {
  @st-scope Base {
    TiledList Container {
      border-width: calc(var(--spacing-unit) * 3);
    }

    TiledList::listItem {
      width: 25%;
    }

    TiledList::itemImage img {
      transform: scale(1);
      transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    TiledList::itemImage:hover img {
      transform: scale(1.1);
    }

    TiledList::cta {
      width: auto;
    }
  }
}