@use '../abstract/_members' as main;

/// Misc
///--------------------------

.with-icon-font {
  font-family: ForkAwesome, $font-family-base;
}


/// Tree
///--------------------------

/// (?) @TODO: More SASS structure (eg. exporting theme variables into component
///            SASS files)
.forest-layout {

  @include main.right-handed {
    border-right: 2px solid $border-color;
  }

  @include main.left-handed {
    border-left: 2px solid $border-color;
  }
}

.forest-layout-bottom-teaser {
  background: linear-gradient(
    to bottom,
    mixAlpha($body-bg, 0%) 0%,
    mixAlpha($body-bg, 100%) 45%
  );
}

.forest-layout-top-teaser {
  background: linear-gradient(
    to top,
    mixAlpha($body-bg, 0%) 0%,
    mixAlpha($body-bg, 100%) 45%
  );
}

.main-page__horizontal-tiles {
  border-top: 2px solid $border-color;

  .tile-block:not(:first-child) {
    border-left: 2px solid $border-color;
  }
}

.main-page__vertical-tiles {
  border-left: 2px solid $border-color;

  .tile-block:not(:first-child) {
    border-top: 2px solid $border-color;
  }
}

.tile-menu__popover {
  border-radius: $border-radius;
  background-color: $body-bg;
}
