less/general.less

@@ -30,6 +30,24 @@
 @usage-counts-icon-gradient: linear-gradient(127deg, @usage-counts-orange-color 0%, @usage-counts-blue-color 100%);
 @usage-counts-number-gradient: linear-gradient(122deg, @primary-light-color 0%, @primary-dark-color 100%);
 
+@general-dot-size: 8px;
+@general-dot-default-background: @global-inverse-color;
+@general-dot-items: {
+  open: @open-access-color;
+  restricted: @restricted-access-color;
+  embargo: @embargo-access-color;
+  closed: @closed-access-color;
+
+  green: @green-oa-color;
+  gold: @gold-oa-color;
+  hybrid: @hybrid-oa-color;
+  bronze: @bronze-oa-color;
+  diamond: @diamond-oa-color;
+}
+
+@general-access-route-label-padding: @global-xsmall-margin;
+@general-access-route-badge-size: 18px;
+
 main {
   min-height: calc(100vh - var(--header-height));
 }
@@ -339,6 +357,59 @@ a:hover .text-usage-counts-hover:extend(.uk-text-background) {
 
 .fully_rounded .a2a_svg { border-radius: 50% !important; }
 
+
+/* Dot Items */
+.dot:extend(.uk-margin-xsmall-right):extend(.uk-display-inline-block) {
+  width: @general-dot-size;
+  height: @general-dot-size;
+  background: @general-dot-default-background;
+  border-radius: 50%;
+
+  each(@general-dot-items, {
+    &.@{key} {
+     background: @value;
+    }
+  });
+}
+
+/* Access Routes */
+.access-route-label:extend(.uk-label all):extend(.uk-background-default):extend(.uk-text-capitalize) {
+  padding: @general-access-route-label-padding;
+}
+
+.access-route-badge {
+  width: @general-access-route-badge-size;
+  height: @general-access-route-badge-size;
+  position: relative;
+
+  & > .dot {
+    position: absolute;
+    margin-right: 0 !important;
+
+    &:first-child {
+      bottom: 0;
+      left: 0;
+
+      &:last-child {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &:nth-child(2) {
+      bottom: 0;
+      right: 0;
+    }
+
+    &:nth-child(3) {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+
 @inverse-general-custom-external-color: @global-inverse-color;
 
 .hook-inverse() {