@import "./vars.pcss";

.logo {
  display: var(--logoDisplay);
  flex: var(--logoFlex);
  place-items: var(--logoPlaceItems);
  height: var(--logoHeight);
  width: var(--logoWidth);
  padding: var(--logoPadding);
  background: var(--logoBg);
  border-radius: var(--logoBorderRadius);
  backdrop-filter: var(--logoBackdropFilter);
  aspect-ratio: var(--logoAspectRatio);
  margin: var(--logoMargin);
  user-select: var(--logoUserSelect);

  &__link {
    opacity: var(--logoLinkOpacity);
    filter: var(--logoLinkFilter);
    display: inherit;
    @mixin resetLink;
    @mixin transition var(--logoTransition);
    @mixin hover {
      --logoFilter: var(--logoLinkHoverFilter);
    }
  }

  &__img {
    display: var(--logoImgDisplay);
    flex: var(--logoImgFlex);
    height: var(--logoImgHeight);
    width: var(--logoImgWidth);
    max-width: var(--logoImgMaxWidth);
    object-fit: var(--logoImgoObjectFit);
    border-radius: var(--logoImgBorderRadius);
    aspect-ratio: var(--logoImgAspectRatio);
  }
}