{"version":3,"sourceRoot":"","sources":["../scss-styles/components/_navbox.scss"],"names":[],"mappings":"AACA,QACE,cACA,gBACA,mBAEA,qBACA,cACA,gBACA,yBAEA,cACE,qBAGF,sBACE,+BACA,mBAIF,cACE,kBACA,iBACA,WACA,gBAEA,kBACE,kBACA,QACA,WACA,YACA,cACA,iBACA,uBAKJ,cACE,kBACA,aACA,gBACA,gBACA,UAEA,aACA,mBACA,8BACA,WAEA,uCACE,eACA,iBAIJ,mBACE,cAIF,gBACE,cACA,cAIF,gBACE,UACA,mBACA,WAEA,kBACE,SAMF,wCACE,iBAMF,uCACE","file":"navbox.css","sourcesContent":["// navbox\r\n.navbox {\r\n  display: block; // because it's an <a>\r\n  overflow: hidden; // keep image neatly clipped\r\n  margin-bottom: 1rem;\r\n\r\n  text-decoration: none; // remove underline\r\n  color: inherit; // don't force link blue\r\n  background: #ffffff;\r\n  border: 1px solid #d8d8d8;\r\n\r\n  &:hover {\r\n    text-decoration: none;\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 3px solid currentColor;\r\n    outline-offset: 3px;\r\n  }\r\n\r\n  // IMAGE AREA\r\n  &-image {\r\n    position: relative;\r\n    aspect-ratio: 3 / 2; // 360x240 look\r\n    width: 100%;\r\n    overflow: hidden;\r\n\r\n    img {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: block;\r\n      object-fit: cover;\r\n      object-position: center;\r\n    }\r\n  }\r\n\r\n  // TITLE BAR\r\n  &-title {\r\n    position: relative;\r\n    padding: 1rem;\r\n    font-weight: 700;\r\n    line-height: 1.5;\r\n    z-index: 1;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 0.75rem;\r\n\r\n    .material-icons-outlined {\r\n      font-size: 2rem;\r\n      font-weight: 1000;\r\n    }\r\n  }\r\n\r\n  &-title-text {\r\n    display: block;\r\n  }\r\n\r\n  // Chevron (Material Icons)\r\n  &-chevron {\r\n    flex: 0 0 auto;\r\n    line-height: 1;\r\n  }\r\n\r\n  // BODY CONTENT\r\n  &-content {\r\n    padding: 0;\r\n    margin-bottom: 1rem;\r\n    color: #333;\r\n\r\n    p {\r\n      margin: 0;\r\n    }\r\n  }\r\n\r\n  // Only pull the title up when there is an image\r\n  &.navbox--has-image {\r\n    .navbox-title {\r\n      margin-top: -44px; // pull bar up over the image\r\n    }\r\n  }\r\n\r\n  // No image: title should sit normally\r\n  &.navbox--no-image {\r\n    .navbox-title {\r\n      margin-top: 0;\r\n    }\r\n  }\r\n}"]}