@oslokommune/punkt-css 0.18.2

package/dist/css/pkt-elements.css

@@ -0,0 +1,881 @@
+@charset "UTF-8";
+/* 
+ * Accessibility
+ * https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
+ */
+.pkt-btn--icon-only .pkt-btn__text {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+/* Button element!
+ *
+ * Size: small, medium, large
+ * Skin: primary, secondary, tertiary, flat, primary-confirm
+ * State: normal, focus, hover, active, disabled
+ * Variant: label-only, icon-left, icon-right, icon-only
+ * Mode: light, dark
+ */
+.pkt-btn {
+  --btn-link-bg: var(--color-blue-dark);
+  --btn-link-bc: var(--color-blue-dark);
+  --btn-link-txt: var(--color-white);
+  --btn-focus-bg: var(--color-active);
+  --btn-focus-bc: var(--color-active);
+  --btn-focus-txt: var(--color-white);
+  --btn-hover-bg: var(--color-active);
+  --btn-hover-bc: var(--color-active);
+  --btn-hover-txt: var(--color-white);
+  --btn-active-bg: var(--color-active);
+  --btn-active-bc: var(--color-active);
+  --btn-active-txt: var(--color-white);
+  --btn-disabled-bg: var(--color-gray);
+  --btn-disabled-bc: var(--color-gray);
+  --btn-disabled-txt: var(--color-grayscale-30);
+}
+
+[data-mode=dark] .pkt-btn {
+  --btn-link-bg: var(--color-blue-light);
+  --btn-link-bc: var(--color-blue-light);
+  --btn-link-txt: var(--color-blue-dark);
+  --btn-focus-bg: var(--color-blue);
+  --btn-focus-bc: var(--color-blue);
+  --btn-focus-txt: var(--color-blue-dark);
+  --btn-hover-bg: var(--color-blue);
+  --btn-hover-bc: var(--color-blue);
+  --btn-hover-txt: var(--color-blue-dark);
+  --btn-active-bg: var(--color-blue);
+  --btn-active-bc: var(--color-blue);
+  --btn-active-txt: var(--color-blue-dark);
+  --btn-disabled-bg: var(--color-gray);
+  --btn-disabled-bc: var(--color-gray);
+  --btn-disabled-txt: var(--color-grayscale-30);
+}
+
+.pkt-btn--secondary {
+  --btn-link-bg: var(--color-transparent);
+  --btn-link-txt: var(--color-blue-dark);
+  --btn-focus-bg: var(--color-transparent);
+  --btn-focus-txt: var(--color-active);
+  --btn-hover-bg: var(--color-transparent);
+  --btn-hover-txt: var(--color-active);
+}
+
+[data-mode=dark] .pkt-btn--secondary {
+  --btn-link-bg: var(--color-transparent);
+  --btn-link-bc: var(--color-white);
+  --btn-link-txt: var(--color-white);
+  --btn-hover-bg: var(--color-transparent);
+  --btn-hover-txt: var(--color-blue);
+}
+
+.pkt-btn--tertiary {
+  --btn-link-bg: var(--color-transparent);
+  --btn-link-bc: var(--color-yellow);
+  --btn-link-txt: var(--color-blue-dark);
+  --btn-focus-bg: var(--color-transparent);
+  --btn-focus-txt: var(--color-active);
+  --btn-hover-bg: var(--color-transparent);
+  --btn-hover-txt: var(--color-active);
+}
+
+[data-mode=dark] .pkt-btn--tertiary {
+  --btn-link-bg: var(--color-transparent);
+  --btn-link-bc: var(--color-yellow);
+  --btn-link-txt: var(--color-white);
+  --btn-focus-bg: var(--color-transparent);
+  --btn-focus-txt: var(--color-blue);
+  --btn-hover-bg: var(--color-transparent);
+  --btn-hover-txt: var(--color-blue);
+}
+
+.pkt-btn--flat {
+  --btn-link-bg: var(--color-transparent);
+  --btn-link-bc: var(--color-transparent);
+  --btn-link-txt: var(--color-blue-dark);
+  --btn-focus-bg: var(--color-gray);
+  --btn-focus-bc: var(--color-gray);
+  --btn-focus-txt: var(--color-active);
+  --btn-hover-bg: var(--color-gray);
+  --btn-hover-bc: var(--color-gray);
+  --btn-hover-txt: var(--color-active);
+  --btn-active-bg: var(--color-transparent);
+  --btn-active-bc: var(--color-transparent);
+  --btn-active-txt: var(--color-active);
+  --btn-disabled-bg: var(--color-transparent);
+  --btn-disabled-bc: var(--color-transparent);
+}
+
+[data-mode=dark] .pkt-btn--flat {
+  --btn-link-bg: var(--color-transparent);
+  --btn-link-bc: var(--color-transparent);
+  --btn-link-txt: var(--color-white);
+  --btn-focus-bg: var(--color-blue-5);
+  --btn-focus-bc: var(--color-blue-5);
+  --btn-focus-txt: var(--color-blue);
+  --btn-hover-bg: var(--color-blue-5);
+  --btn-hover-bc: var(--color-blue-5);
+  --btn-hover-txt: var(--color-blue);
+  --btn-active-bg: var(--color-transparent);
+  --btn-active-bc: var(--color-transparent);
+  --btn-active-txt: var(--color-blue);
+  --btn-disabled-bg: var(--color-transparent);
+  --btn-disabled-bc: var(--color-transparent);
+  --btn-disabled-txt: var(--color-white);
+}
+
+.pkt-btn--primary-confirm {
+  --btn-link-bg: var(--color-green);
+  --btn-link-bc: var(--color-green);
+  --btn-link-txt: var(--color-blue-dark);
+}
+
+[data-mode=dark] .pkt-btn--primary-confirm {
+  --btn-link-bg: var(--color-green);
+  --btn-link-bc: var(--color-green);
+}
+
+.pkt-btn {
+  border-radius: 0;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: normal;
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: top;
+  background-color: var(--btn-link-bg);
+  border: 2px solid var(--btn-link-bc);
+  color: var(--btn-link-txt);
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+  text-align: left;
+  font-size: 1.125rem;
+  line-height: 1.5em;
+  padding: 0.625rem 0.9375rem;
+}
+.pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
+  display: block;
+}
+.pkt-btn__icon {
+  --fg-color: currentColor;
+  display: none;
+  flex-shrink: 0;
+}
+.pkt-btn:link, .pkt-btn:visited {
+  color: var(--btn-link-txt);
+}
+a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
+  background-color: var(--btn-focus-bg);
+  border-color: var(--btn-focus-bc);
+  color: var(--btn-focus-txt);
+  outline: 0;
+  text-decoration: underline;
+}
+
+a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
+  background-color: var(--btn-hover-bg);
+  border-color: var(--btn-hover-bc);
+  color: var(--btn-hover-txt);
+  outline: 0;
+  text-decoration: underline;
+}
+
+a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pkt-btn--active:hover {
+  background-color: var(--btn-active-bg);
+  border-color: var(--btn-active-bc);
+  color: var(--btn-active-txt);
+  outline: 0;
+  text-decoration: none;
+}
+
+.pkt-btn:disabled {
+  background-color: var(--btn-disabled-bg);
+  border-color: var(--btn-disabled-bc);
+  color: var(--btn-disabled-txt);
+  cursor: inherit;
+}
+.pkt-btn__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.pkt-btn--label-only .pkt-btn__icon {
+  display: none;
+}
+.pkt-btn--icon-left {
+  flex-direction: row;
+}
+.pkt-btn--icon-left .pkt-btn__icon {
+  margin: 0.09375rem 0.3125rem 0 0;
+}
+.pkt-btn--icon-right {
+  flex-direction: row-reverse;
+}
+.pkt-btn--icon-right .pkt-btn__icon {
+  margin: 0.09375rem 0 0 0.3125rem;
+}
+.pkt-btn--icon-only .pkt-btn__icon {
+  margin: 0.09375rem -0.21875rem;
+}
+.pkt-btn--small {
+  font-size: 1rem;
+  line-height: 1.5em;
+  padding: 0.3125rem 0.625rem;
+}
+.pkt-btn--small .pkt-btn__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
+  margin: 0 0.3125rem 0 0;
+}
+.pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
+  margin: 0 0 0 0.3125rem;
+}
+.pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
+  margin: 0 -0.3125rem;
+}
+.pkt-btn--large {
+  font-size: 1.5rem;
+  line-height: 1.4166666667em;
+  padding: 0.9375rem 1.25rem;
+}
+.pkt-btn--large .pkt-btn__icon {
+  height: 2rem;
+  width: 2rem;
+}
+.pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon {
+  margin: 0.0625rem 0.625rem 0 0;
+}
+.pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon {
+  margin: 0.0625rem 0 0 0.625rem;
+}
+.pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon {
+  margin: 0.0625rem -0.25rem;
+}
+.pkt-btn::-moz-focus-inner {
+  border: 0;
+}
+
+/* 
+ * Form elements
+ * https://css-tricks.com/html-inputs-and-labels-a-love-story/
+ * 
+ */
+/* TODO: move to animation.scss */
+@keyframes enter {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+/* TODO: Contemplate and decide if this should be split up to multiple files or not.
+ * button is only one without pkt-form prefix. Is that ok???
+ */
+.pkt-form {
+  /* EXPLICIT LABEL (recommended for use)
+   * - the label is connected to an input via "for" and "id"
+   */
+}
+.pkt-form-group {
+  margin-bottom: 1.5rem;
+}
+.pkt-form-group:focus-within {
+  color: var(--color-active);
+}
+.pkt-form-label {
+  width: 100%;
+}
+.pkt-form-help {
+  margin: 0.25em 0;
+  font-size: 0.875rem;
+  line-height: 1.25em;
+  opacity: 0.9;
+}
+.pkt-form-validation {
+  animation: enter 0.2s ease-in forwards;
+  background-color: var(--color-red);
+  border: 2px solid var(--color-red);
+  font-size: 0.875rem;
+  line-height: 2rem;
+  margin: 1rem 0 0;
+  padding: 0.4375rem 0.5rem;
+  transform-origin: 0 0;
+}
+.pkt-form-validation--warning {
+  background-color: var(--color-yellow);
+  border-color: var(--color-yellow);
+}
+.pkt-form-validation--error {
+  background-color: var(--color-red);
+  border-color: var(--color-red);
+}
+.pkt-form-input, .pkt-form-textarea {
+  appearance: none;
+  background-clip: padding-box;
+  background-color: var(--color-white);
+  border: 2px solid var(--color-blue-dark);
+  border-radius: 0;
+  color: var(--color-blue-dark);
+  display: block;
+  font-size: 1rem;
+  font-weight: 400;
+  height: 3.125rem;
+  line-height: 2rem;
+  margin: 0;
+  padding: 0.4375rem 0.5rem;
+  position: relative;
+  width: 100%;
+  /* Placeholder
+   * 1. Override Firefox's default opacity
+   */
+}
+.pkt-form-input:focus, .pkt-form-textarea:focus {
+  background-color: var(--color-white);
+  border-color: var(--color-active);
+  box-shadow: 0 0 var(--color-active);
+  color: var(--color-active);
+  outline: 2px solid var(--color-active);
+}
+.pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
+  color: var(--color-grayscale-30);
+  opacity: 1; /* 1 */
+}
+.pkt-form-input + .pkt-form-validation, .pkt-form-textarea + .pkt-form-validation {
+  display: none;
+}
+.pkt-form-input:not(:placeholder-shown):invalid, .pkt-form-textarea:not(:placeholder-shown):invalid {
+  border-color: var(--color-red);
+}
+.pkt-form-input:not(:placeholder-shown):invalid + .pkt-form-validation, .pkt-form-textarea:not(:placeholder-shown):invalid + .pkt-form-validation {
+  display: inherit;
+}
+.pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
+  background-color: var(--color-gray);
+  border-color: var(--color-grayscale-30);
+  color: var(--color-grayscale-30);
+  cursor: inherit;
+}
+.pkt-form-check-input {
+  appearance: none;
+  background-color: var(--color-white);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: 2px solid var(--color-blue-dark);
+  display: inline-block;
+  margin: 0.125rem 0.25rem 0 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: all 0.3s ease-out;
+  vertical-align: top;
+}
+.pkt-form-check-input[type=checkbox] {
+  border-radius: 0;
+}
+.pkt-form-check-input[type=radio] {
+  border-radius: 50%;
+}
+.pkt-form-check-input:hover {
+  border-color: var(--color-active);
+}
+.pkt-form-check-input:active {
+  border-color: var(--color-active);
+  outline: 2px solid var(--color-active);
+}
+.pkt-form-check-input:focus {
+  border-color: var(--color-active);
+  outline: 2px solid var(--color-hover);
+}
+.pkt-form-check-input:checked[type=radio] {
+  background-color: var(--color-white);
+  border: 6px solid var(--color-active);
+}
+.pkt-form-check-input:checked[type=checkbox] {
+  background-color: var(--color-active);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+  border-color: var(--color-active);
+}
+.pkt-form-check-input:disabled {
+  border-color: var(--color-grayscale-30);
+  cursor: not-allowed;
+}
+.pkt-form-check-input:disabled ~ .pkt-form-label {
+  color: var(--color-grayscale-30);
+  cursor: not-allowed;
+}
+
+/* 
+ * Horisontal divider <hr>
+ */
+.pkt-hr {
+  border: 0;
+  border-top: 1px solid var(--color-grayscale-20);
+}
+
+/* 
+ * Image elements
+ */
+/*
+DEBATE:
+CSS reset in minside-frontend sets all images to be fluid by default. However, this breaks
+a lot of third-party widgets like Google Maps, as they are not expecting the images within themselves
+to be resized from the outside.
+
+Therefore, this is removed from the reset here, and images who need to be fluid need a class for it.
+*/
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-round {
+  border-radius: 50%;
+  overflow: hidden;
+  object-fit: cover;
+}
+
+.figure {
+  display: inline-block;
+}
+
+/* 
+ * List elements
+ */
+.pkt-list {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  list-style: none;
+  padding: 0;
+  position: relative;
+  row-gap: 1.5rem;
+}
+@media screen and (min-width: 48rem) {
+  .pkt-list.two-cols-tablet-up {
+    column-gap: 1.5rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .pkt-list.three-cols-laptop-up {
+    column-gap: 1.5rem;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+.pkt-list li > a {
+  display: grid;
+  grid-template-columns: 2rem auto;
+  column-gap: 1rem;
+}
+
+.pkt-dl,
+.pkt-dl--narrow {
+  display: flex;
+  flex-direction: column;
+}
+@supports (display: grid) {
+  .pkt-dl,
+.pkt-dl--narrow {
+    display: grid;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    margin: 0.5rem 0;
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .pkt-dl {
+    grid-template-columns: minmax(9rem, auto) 1fr;
+    border-bottom: 0;
+  }
+}
+
+.pkt-dt {
+  padding: 0.5em 0 0;
+  font-size: 0.875rem;
+  border-bottom: none;
+}
+@media screen and (min-width: 48rem) {
+  .pkt-dt {
+    font-size: inherit;
+  }
+}
+
+.pkt-dl--narrow > .pkt-dt {
+  padding: 0.5em 0 0;
+  font-size: 0.875rem;
+  border-bottom: none;
+}
+
+.pkt-dd {
+  padding: 0 0 0.5em;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+@media screen and (min-width: 48rem) {
+  .pkt-dd {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+  @supports (display: grid) {
+    .pkt-dd {
+      padding: 0.25em 0 0.25em 1.25em;
+      border-bottom: 0;
+    }
+  }
+}
+
+.pkt-dl--narrow > .pkt-dd {
+  padding: 0 0 0.5em;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+/* 
+ * Section elements
+ * 
+ */
+.pkt-section {
+  margin: 1rem 0;
+}
+
+.pkt-section--dark {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #2a2859;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+  color: white;
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--dark {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--dark {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--dark a.pkt-btn--ter {
+  color: white;
+}
+
+.pkt-section--danger {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #ff8274;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+  color: black;
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--danger {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--danger {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--danger a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--grey {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #f2f2f2;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--grey {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--grey {
+    padding: 1.5rem;
+  }
+}
+
+.pkt-section--success {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #43f8b6;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+  color: black;
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--success {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--success {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--success a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--warning {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #f9c66b;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--warning {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--warning {
+    padding: 1.5rem;
+  }
+}
+
+.pkt-section--info {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #b3f5ff;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--info {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--info {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--info a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--frame {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: white;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+  border: 1px solid;
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--frame {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--frame {
+    padding: 1.5rem;
+  }
+}
+
+[class*=ok-section-] > [class^=ok-title-] {
+  margin-top: 0;
+}
+
+.pkt-section--margin-top {
+  margin-top: 2.5rem;
+}
+
+/* 
+ * Select component
+ *
+ * TODO: Det er ikke optimalt løst å duplisere svg-ikonet,
+ * så dette må refaktoreres ved anledning.
+ */
+.pkt-select {
+  display: block;
+  background-color: var(--color-white);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='%232a2859' /%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 2rem auto, 100%;
+  border: 2px solid var(--color-blue-dark);
+  border-radius: 0;
+  color: var(--color-blue-dark);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: normal;
+  height: 3.125rem;
+  line-height: 2rem;
+  margin: 0;
+  max-width: 100%;
+  padding: 0.4375rem 3rem 0.4375rem 0.5rem;
+  width: 100%;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+.pkt-select::-ms-expand {
+  display: none;
+}
+.pkt-select:enabled:focus {
+  border-color: var(--color-active);
+  outline: 2px solid var(--color-active);
+}
+.pkt-select:enabled:hover {
+  --fg-color: var(--color-active);
+  border-color: var(--color-active);
+  color: var(--color-active);
+}
+.pkt-select:enabled:active {
+  border-color: var(--color-active);
+  outline: none;
+}
+.pkt-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--color-active);
+}
+.pkt-select:disabled {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='%23b9b9b9' /%3e%3c/svg%3e");
+  border-color: var(--color-grayscale-30);
+  color: var(--color-grayscale-30);
+}
+.pkt-select option {
+  background-color: var(--color-white);
+  color: var(--color-blue-dark);
+  font-weight: normal;
+}
+
+/* 
+ * Table elements
+ */
+.pkt-table {
+  width: 100%;
+  font-size: 0.875rem;
+  border-radius: 2px;
+  border-collapse: collapse;
+}
+.pkt-table__th {
+  color: black;
+  font-weight: 500;
+  text-align: left;
+  background: #f2f2f2;
+  border-bottom: 1px solid #f2f2f2;
+}
+.pkt-table__th:first-child {
+  border-top-left-radius: 2px;
+}
+.pkt-table__th:last-child {
+  border-top-right-radius: 2px;
+}
+.pkt-table th,
+.pkt-table td {
+  min-width: 200px;
+  padding: 0.5rem;
+  text-align: left;
+  border-bottom: 1px solid #f2f2f2;
+}
+.pkt-table tbody tr:hover > td {
+  background: rgba(42, 40, 89, 0.02);
+}
+.pkt-table--info .pkt-table__th {
+  background: rgba(249, 198, 107, 0.25);
+  border-bottom: 1px solid #f9c66b;
+}
+.pkt-table--success .pkt-table__th {
+  background: rgba(199, 246, 201, 0.25);
+  border-bottom: 1px solid #c7f6c9;
+}
+.pkt-table--strong .pkt-table__th {
+  background: rgba(42, 40, 89, 0.25);
+  border-bottom: 1px solid #2a2859;
+}
+.pkt-table--shadow {
+  background: white;
+  box-shadow: 0 1px 3px rgba(42, 40, 89, 0.25);
+}
+.pkt-table--shadow > tbody tr:last-of-type td {
+  border-bottom: none;
+}
+
+.pkt-table-container {
+  margin: 1rem 0;
+  overflow-x: auto;
+}