/* Allow tailwind util class discovery */
@source "../../components";

@layer onespace {
  :root {
    /* Legacy variables (deprecated) */
    --os-primary: #254c5a;
    --os-accent: #3bbcac;
    --os-smokey: #59595c;
    --cool-grey: #cfd2d1;
    --snipr-orange: #ec6d23;

    /* Brand colours */
    --colour-corporate-blue: #254c5a;
    --colour-space-teal: #3bbcac;
    --colour-smokey-grey: #59595c;
    --colour-cool-grey: #cfd2d1;
    --colour-vibrant-orange: #ec6d23;

    /* Semantic colours */
    --colour-success-green: #168360;
    --colour-warning-yellow: #eab308;
    --colour-danger-red: #ca3233;
    --colour-help-purple: #7632ff;
    --colour-hover-grey: #a4a3a829;
    --colour-suspended-yellow: #b5aa44;
    --colour-blocked-red: #c52d32;
    --colour-tinnitus-grey: #eeeeee;

    --colour-danger-red-on-dark: #e49696;
    --colour-success-green-on-dark: #66ea9b;

    --colour-disabled: var(--cool-grey);
    --colour-disabled-tint: color-mix(
      in srgb,
      var(--cool-grey) 20%,
      transparent
    );

    /* Contextual colours */
    --colour-primary: var(--colour-corporate-blue);
    --colour-contrast: var(--colour-smokey-grey);
    --colour-accent: var(--colour-space-teal);
    --colour-help: var(--colour-accent);

    --colour-info: var(--colour-accent);
    --colour-info-bg: color-mix(in srgb, var(--colour-info) 10%, transparent);

    --colour-warning-bg: color-mix(
      in srgb,
      var(--colour-warning-yellow) 10%,
      transparent
    );
    --colour-warning-text: #937006;

    --colour-danger-bg: color-mix(
      in srgb,
      var(--colour-danger-red) 10%,
      white
    );

    --colour-accent-tint: color-mix(
      in srgb,
      var(--colour-accent) 10%,
      transparent
    );

    /* Typography */
    --font-size: 16px; /* 1rem */
    --font-family:
      "Poppins", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-caption: 300 0.75rem var(--font-family);
    --font-body: 300 0.875rem var(--font-family);
    --font-h3: 500 1.125rem var(--font-family);
    --font-h2: 600 1.25rem var(--font-family);
    --font-h1: 300 1.5rem var(--font-family);

    /* Sizing */
    --spacing: 0.25rem;
    --gap-internal: calc(var(--spacing) * 1); /* 0.25rem/4px/gap-1 */
    --gap-related: calc(var(--spacing) * 2); /* 0.5rem/8px/gap-2 */
    --gap-distinct: calc(var(--spacing) * 4); /* 1rem/16px/gap-4 */
    --size-min-interactive: 24px; /* WCAG minimum size for interactive items */
    --size-input: 36px;
    --size-icon: 1.2em; /* 120% of parent text */
    --size-radius: 0.5rem; /* 8px */
  }

  /* Helper classes */
  .internal {
    gap: var(--gap-internal);
  }
  .related {
    gap: var(--gap-related);
  }
  .distinct {
    gap: var(--gap-distinct);
  }
  .gap-internal {
    gap: var(--gap-internal);
  }
  .gap-related {
    gap: var(--gap-related);
  }
  .gap-distinct {
    gap: var(--gap-related);
  }
  .p-internal {
    padding: var(--gap-internal);
  }
  .p-related {
    padding: var(--gap-related);
  }
  .p-distinct {
    padding: var(--gap-distinct);
  }
  .action-bar {
    display: flex;
    gap: var(--gap-internal);
    align-items: center;
  }

  .tooltip-help > .p-tooltip-text {
    --colour-help: var(--colour-accent);
    border: solid 2px var(--colour-help);
    background-color: var(--colour-accent);
    color: white;
    font: var(--font-body);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  }

  .archived {
    filter: grayscale(0.4) opacity(0.6);
    transition: filter 0.3s;
    &.clickable:hover {
      filter: none;
    }
  }
  .leading {
    font-size: 1.2em;
  }

  /* add sorting icons to gridview sort links */
  a.asc:after,
  a.sort:after,
  a.desc:after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    margin-left: var(--gap-related);
    background: transparent;
  }

  /** Default sort (not order) **/
  a.sort:after {
    content: "\e0ae";
  }

  /** Ascending icon **/
  a.asc:after {
    content: "\f884";
  }

  /** Descending icon **/
  a.desc:after {
    content: "\f160";
  }

  /* Overlay hover color to allow different background colors */
  .clickable {
    position: relative;
    cursor: pointer;
  }
  .clickable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colour-hover-grey);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
  }
  .clickable:hover::before {
    opacity: 1;
  }

  /* Typography */
  :root {
    font-size: var(--font-size);
    font-family: var(--font-family);
  }
  body {
    font: var(--font-body);
    color: var(--colour-contrast);
  }
  label {
    font: var(--font-body);
  }
  small {
    font: var(--font-caption);
  }
  h3 {
    font: var(--font-h3);
    margin: 0;
    color: var(--colour-primary);
  }
  h2 {
    font: var(--font-h2);
    margin: 0;
    color: var(--colour-primary);
  }
  h1 {
    font: var(--font-h1);
    margin: 0;
    color: var(--colour-primary);
  }

  /* Hoverable elements should highlight with accent */
  a:hover,
  a:active,
  a:focus,
  .os-clickable:hover,
  .os-clickable:active,
  .os-clickable:focus {
    cursor: pointer;
    color: var(--colour-accent);
  }

  /* Avatar */
  .os-avatar {
    border-radius: 50%;
    border: 1px solid currentColor;

    container-type: inline-size;
  }
  .os-avatar.large {
    border-width: 2px;
    .os-icon {
      font-weight: 100;  /* Legacy v6 - use --fa-style */
      --fa-style: 100;
    }
  }
  .os-avatar-fallback {
    font-size: 45cqw;
  }
  .os-avatar.squircle {
    border-radius: 25%;
  }
  .os-avatar.square {
    border-radius: 5%;
    border-radius: 25%;
  }

  .os-avatar-pending > div > .os-avatar {
    border: 1px solid var(--colour-space-teal);
  }
  .os-avatar-suspended > div > .os-avatar {
    border-width: 4px !important;
    border: 4px solid var(--colour-suspended-yellow);
  }
  .os-avatar-blacklisted > div > .os-avatar {
    border-width: 4px !important;
    border: 4px solid var(--colour-blocked-red);
  }
  .os-avatar-blocked > div > .os-avatar {
    border-width: 4px !important;
    border: 4px solid var(--colour-smokey-grey);
  }

  /* Chip */
  .os-chip {
    border-width: 1px;
    border-radius: 2rem;
    box-sizing: border-box;
    font: var(--font-caption);
    .os-label {
      padding-left: calc(var(--spacing) * 2);
      padding-right: calc(var(--spacing) * 2);
      padding-top: calc(var(--spacing) * 1);
      padding-bottom: calc(var(--spacing) * 1);
    }
    .p-skeleton {
      /* Adaptive sizing for skeleton view. Do not change */
      border-radius: 2rem;
      height: calc((var(--spacing) * 2 * 2) + 1em) !important;
      font-size: 1em;
    }

    user-select: all;

    &:has(.p-skeleton) {
      border-width: 0;
    }
  }

  /* Divider */
  .os-divider-header & .os-clickable {
    cursor: pointer;
  }
  .os-divider-content {
    padding: var(--gap-related) var(--gap-distinct);
  }
  .os-divider-header.os-clickable:hover > .os-divider-chevron {
    transition: transform 0.3s ease;
    font-weight: 900 !important;
    color: var(--colour-accent);
  }
  .os-divider-header.os-clickable:hover > .os-label {
    color: var(--colour-accent) !important;
  }
  .os-divider-hr {
    color: var(--colour-cool-grey);
  }
  .os-divider-chevron,
  .os-chevron {
    transition: transform 0.3s ease;
    color: var(--colour-corporate-blue);
    font-weight: 300;
  }
  .os-divider-chevron[data-os-divider-open="true"],
  .os-chevron[data-chevron-toggled="true"] {
    transform: rotate(90deg);
  }
  .os-divider-container {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 1s;
  }

  /* Icon */
  .os-icon {
    font-weight: 300; /* Legacy v6 - use --fa-style */
    --fa-style: 300;
  }

  /* Info Card */
  .os-info-card {
    padding: var(--gap-internal);

    .os-info-card-heading {
      color: white;
      font: var(--font-caption);
      background-color: var(--os-primary);
      border-radius: 2rem;
      padding-left: calc(var(--spacing) * 2);
      padding-right: calc(var(--spacing) * 2);
      width: min-content;
    }

    .os-info-card-badge {
      border-radius: 50%;
    }

    .os-info-card-action-button {
      background-color: transparent;
      border-style: none;
      font-size: 1rem;
      .os-icon {
        font-weight: 500; /* Legacy v6 - use --fa-style */
        --fa-style: 500;
        font-size: 1rem;
      }
    }
    .os-info-card-action-button:hover {
      background-color: var(--colour-hover-grey);
    }
  }

  /* Label */
  .os-label {
    .os-icon {
      font-size: var(--size-icon);
    }
    .os-label-icon-trailing {
      font-size: 0.75rem;
      vertical-align: super;
    }
  }

  /* Panel */
  .os-panel {
    box-sizing: border-box;
    background-color: white;
    border-radius: var(--size-radius);
    border-width: 1px;
    border-color: var(--cool-grey);
    padding: var(--gap-related);

    &.danger {
      background-color: var(--colour-danger-bg);
      border-color: var(--colour-danger-red);
    }

    &.contrast {
      background-color: var(--colour-tinnitus-grey);
      border-color: var(--colour-cool-grey);
    }

    &.warning {
      background-color: var(--colour-warning-bg);
      border-color: var(--colour-warning-yellow);
    }
  }

  /* Stat Panel */
  .os-stat-panel {
    --size-value: 36cqw;
    --colour-linework: var(--colour-cool-grey);
    padding: 2rem var(--gap-related);
    place-content: center;
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    border-color: var(--colour-linework);

    .stat-panel-value {
      font-size: var(--size-value);
    }

    .stat-panel-icon {
      font-size: 40cqw;
      & > div {
        height: var(--size-icon);
        width: var(--size-icon);
      }
    }
    &.filterable {
      cursor: pointer;
      transition: transform 0.25s ease-out;
      --colour-filter: var(--colour-accent);
      --on-filter-colour: white;
      .filter-banner {
        --size-icon: 1.2em;
        font: var(--font-body);
        position: absolute;
        display: flex;
        left: 0;
        right: 0;
        bottom: 0;
        padding: var(--gap-internal);
        visibility: hidden;
        background-color: var(--colour-filter);
        color: var(--on-filter-colour);
        place-content: center;
      }

      &.filtered {
        transform: translateY(0.5rem);
        --colour-filter: var(--colour-primary);
        --colour-linework: var(--colour-filter);
        .filter-banner {
          visibility: visible;
        }
        .filter-icon {
          font-weight: 900;
        }

        &:hover {
          --colour-filter: var(--colour-contrast);
        }
      }
      &:hover {
        --colour-linework: var(--colour-filter);

        .filter-banner {
          visibility: visible;
        }
      }
    }

    & > .stat-panel-content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      place-content: center;
      place-items: center;
      gap: var(--gap-related);
    }
  }

  /*
  **
  ** PRIME REACT OVERRIDES
  **
  */
  .p-component,
  .p-component > normal {
    font: var(--font-body); /* Set default font size */
    color: var(--colour-smokey-grey);
  }

  /* Buttons */
  .p-button {
    --p-button-colour: var(--colour-primary);
    padding: var(--gap-internal) var(--gap-related);
    gap: var(--gap-internal);
    min-height: var(--size-input);
    box-shadow: none; /* TODO Consider adding in some form */
    overflow: visible;

    color: white;
    background-color: var(--p-button-colour);
    /* Keep sizing in line with bordered buttons */
    border: solid 1px transparent;
    border-radius: var(--size-radius);

    /* `outlined` flag */
    &.p-button-outlined {
      background-color: white;
      border-color: var(--p-button-colour);
      color: var(--p-button-colour);
    }

    .os-button-icon {
      font-size: 1.2em;
    }

    &.p-button-success {
      --p-button-colour: var(--colour-success-green);
    }

    &.p-button-secondary {
      --p-button-colour: var(--colour-accent);
      &:hover {
        --p-button-colour: var(--colour-primary);
      }
    }

    &.p-button-danger {
      --p-button-colour: var(--colour-danger-red);
    }

    &.p-button-contrast {
      --p-button-colour: var(--colour-contrast);
    }

    &.p-button-info {
      --p-button-colour: var(--colour-help);
    }

    &.p-button-help {
      --p-button-colour: var(--colour-help);
    }

    &:hover {
      --p-button-colour: var(--colour-accent);
    }

    &.p-disabled:not(.p-button-loading) {
      --p-button-colour: var(--colour-disabled);
      opacity: 1;
    }

    /** Icon Buttons **/
    &.p-button-icon-only {
      padding: 0;
      min-width: var(--size-min-interactive);
      min-height: var(--size-min-interactive);
      width: min-content;
      height: min-content;
      overflow: visible;
      color: var(--p-button-colour);
      background-color: transparent;
      border-color: transparent;

      .os-icon {
        font-weight: 900;  /* Legacy v6 - use --fa-style */
        --fa-style: 900;
      }
      &.p-button-outlined {
        border-color: transparent;
        .os-icon {
          font-weight: 300; /* Legacy v6 - use --fa-style */
          --fa-style: 300;
        }
      }

      &:hover {
        background-color: var(--colour-hover-grey);
      }

      &.p-disabled:not(.p-button-loading) {
        .os-icon {
          font-weight: 300; /* Legacy v6 - use --fa-style */
          --fa-style: 300;
        }
      }

      &.p-datepicker-trigger {
        height: 100%;
        border-radius: 0 8px 8px 0px;
        padding: 0px 4px;
        min-height: var(--size-input);
        background-color: color-mix(
          in srgb,
          var(--colour-cool-grey) 20%,
          transparent
        );
        border-color: var(--colour-cool-grey);
        border-width: 1px;
        place-self: center;
      }
    }
  }
  .p-button-group {
    .p-button {
      border: solid 1px var(--colour-primary);
      padding: var(--gap-related);
      border-radius: 0;

      &:first-child {
        border-top-left-radius: var(--size-radius);
        border-bottom-left-radius: var(--size-radius);
      }

      &:last-child {
        border-top-right-radius: var(--size-radius);
        border-bottom-right-radius: var(--size-radius);
      }
    }
    .p-button[aria-pressed="false"] {
      background-color: transparent;
      color: var(--colour-primary);
      &:hover {
        background-color: var(--colour-accent);
      }
    }
  }

  /* Checkbox */
  .p-checkbox {
    &:not(.p-disabled):has(.p-checkbox-input:hover) {
      .p-checkbox-box {
        border-color: var(--colour-accent);
      }
    }
    &.p-highlight {
      .p-checkbox-box {
        background-color: var(--colour-accent);
        border-color: var(--colour-accent);
      }
    }
  }

  /* Radio Button */
  .p-radiobutton {
    &:hover {
      .p-radiobutton-box {
        border-color: var(--colour-accent);
      }
    }
    &[data-p-checked="true"] {
      .p-radiobutton-box {
        background-color: var(--colour-accent);
        border-color: var(--colour-accent);
      }
    }
  }

  /* Dialog */
  .p-dialog {
    &.wizard {
      min-width: 60vw;
      min-height: 33.75vw;
    }
    
    /* Red circle icon for dialog close icons */
    .p-dialog-header-close-icon {
      border-radius: 50%;
      padding: 0.2rem;
      background-color: var(--colour-danger-red);
      color: white;
    }
    .p-dialog-header-icons {
      gap: var(--gap-internal);
      .p-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    .p-dialog-content,
    .p-dialog-header,
    .p-dialog-footer {
      padding: var(--gap-distinct);
    }
    .p-dialog-header {
      padding-bottom: 0;

      .p-dialog-title {
        font: var(--font-h2);
        color: var(--colour-primary);
      }
    }
    .p-dialog-footer {
      padding-top: 0;
    }

    &.p-confirm-dialog {
      .p-dialog-footer {
        display: flex;
        justify-content: end;
        gap: var(--gap-internal);
      }
    }
  }

  /* Fieldset */
  .p-fieldset {
    .p-fieldset-legend {
      margin: 0;
      padding: var(--gap-distinct);
      font: var(--font-h3);
      border-radius: var(--size-radius);
    }
    .p-fieldset-content {
      padding: var(--gap-distinct);
    }
  }

  /* Inputs */
  .p-inputtext {
    font: var(--font-body);
    padding: var(--gap-internal) var(--gap-related);
    align-content: center;
    min-height: var(--size-input);
    &:enabled {
      &:hover {
        border-color: var(--colour-accent);
      }
      &:focus {
        border-color: var(--colour-accent);
        box-shadow: 0 0 0 0.2rem var(--colour-accent-tint);
      }
    }
  }
  .p-dropdown {
    &:not(.p-disabled) {
      &:hover {
        border-color: var(--colour-accent);
      }
      &:focus,
      &.p-focus {
        border-color: var(--colour-accent);
        box-shadow: 0 0 0 0.2rem var(--colour-accent-tint);
      }
    }

    .p-dropdown-trigger {
      width: 2rem;
    }
  }
  .p-dropdown-panel {
    .p-dropdown-item {
      &.p-highlight {
        color: var(--colour-accent);
        background: var(--colour-accent-tint);

        &.p-focus {
          background: color-mix(
            in srgb,
            var(--colour-accent-tint) 30%,
            var(--colour-hover-grey)
          );
        }
      }

      &.p-focus {
        background: var(--colour-hover-grey);
      }

      .p-dropdown-check-icon,
      .p-dropdown-blank-icon {
        display: none;
      }
    }
  }

  .p-inline-message {
    border-radius: var(--size-radius);
    gap: var(--gap-distinct);
    .p-inline-message-icon {
      margin: 0 !important;
    }
    .p-inline-message-text {
      font: var(--font-caption);
      margin: 0 !important;
      padding-top: 0 !important;
    }
    &.p-inline-message-warn {
      .p-inline-message-icon {
        color: var(--colour-warning-yellow);
      }
      background-color: var(--colour-warning-bg);
    }
    &.p-inline-message-info {
      background-color: var(--colour-info-bg);
      .p-inline-message-icon {
        color: var(--colour-info);
      }
    }
  }

  /* Steps */
  .p-steps {
    .p-steps-item {
      &::before {
        border-color: var(--colour-cool-grey);
        margin-top: -0.75rem; /* Had to eyeball this value */
      }

      .p-menuitem-link {
        background: transparent;
      }

      .p-steps-number {
        aspect-ratio: 1;
        min-height: var(--size-min-interactive);
        min-width: var(--size-min-interactive);
      }
      .p-steps-title {
        margin-top: var(--gap-internal);
        font: var(--font-caption);
      }

      /* Selected item */
      &.p-highlight {
        .p-steps-number {
          background-color: var(--colour-accent);
        }
        .p-steps-title {
          font-weight: 500;
        }
      }
    }
  }

  /* Tabs */
  .p-tabview {
    .p-tabview-nav {
      border-bottom-width: 1px;
      .p-tabview-nav-link {
        background-color: transparent;
        border-bottom-width: 2px;
        font: var(--font-body);
        font-weight: 500;
        padding: var(--gap-distinct);
        color: var(--colour-primary);

        &:hover {
          color: var(--colour-accent);
        }

        .p-tabview-title {
          min-height: 1.2rem;
        }
      }
      .p-tabview-selected {
        .p-tabview-nav-link {
          border-color: var(--colour-accent);
        }
      }
    }
  }
  .p-tabmenu {
    overflow: visible;
    .p-tabmenu-nav {
      border-bottom: solid 1px var(--colour-cool-grey);
      box-sizing: border-box;
      .p-tabmenuitem {
        .p-menuitem-link {
          background: none;
          font: var(--font-body);
          font-weight: 500;
          color: var(--colour-primary);
          box-sizing: border-box;
          border-bottom: solid 2px transparent;
          padding: var(--gap-distinct) !important;

          .p-menuitem-icon {
            font-weight: 300;
            font-size: 1.2em !important;
          }

          &:hover {
            color: var(--colour-accent);
          }
        }

        &.p-highlight .p-menuitem-link {
          border-color: var(--colour-accent);
        }

        &:hover {
          /* PrimeReact colours */
          border-color: rgb(156, 163, 175);
        }
      }
    }
  }

  /* Paginator */
  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background-color: var(--colour-accent);
    color: white;
  }

  /* Tooltip */
  .p-tooltip-text {
    font: var(--font-caption);
    padding: var(--gap-related);
    border-radius: var(--size-radius);
    color: white;
    background-color: var(--colour-contrast);
  }

  .colour-circle {
    /* Add slight outline to make all colours visible */
    text-shadow: 0 0 1px #000;

    /* Add/override specific css colours for colourCircle */

    &.bronze {
      color: #cd7f32;
    }
    &.brown {
      /* For some reason css brown is red */
      color: #895129 !important;
    }
    &.champagne {
      color: #e9d2ac;
    }
    &.cream {
      color: #fefbeb;
    }
    &.grey {
      color: gray;
    }
  }

  /* Fix scrolling on maximized data table */
  .maximize.maximized > .p-dialog-content > .os-data-table {
    display: grid;
    height: 100%;
  }

  #os-data-table > div > table > thead > tr > th:nth-child(n) {
    background-color: transparent;
  }

  #os-data-table > div.p-datatable-wrapper > table {
    border-collapse: separate;
    border-spacing: 0;
  }

  td {
    padding: 0.25rem 0.5rem;
    text-align: left;
  }

  .p-column-header-content {
    justify-content: left;
    white-space: nowrap;
  }

  .p-datatable-header {
    padding: 0px;
    background: none;
    border: none;
  }

  #table-wrapper {
    /* background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px; */
    border-radius: 8px;
  }

  #os-data-table
    > div.p-datatable-wrapper
    > table
    > tbody
    > tr:nth-child(n)
    > td:nth-child(n) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* .p-dropdown-panel
  .p-dropdown-items
  .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  background-color: var(--os-accent);
  color: white;
} */

  .p-datatable.p-datatable-scrollable
    > .p-datatable-wrapper
    > .p-datatable-table
    > .p-datatable-thead {
    background-color: white;
  }

  #os-data-table
    > div.p-datatable-wrapper
    > table
    > thead
    > tr:nth-child(n)
    > th:nth-child(n)
    > div
    > button {
    margin: 0rem 0.5rem;
  }

  .p-datatable .p-datatable-thead > tr > th {
    font-weight: 500;
  }

  .p-datatable .p-hidden-space {
    visibility: collapse;
  }

  .p-datatable .p-sortable-column.p-highlight,
  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
    color: var(--os-accent);
  }

  .p-inputnumber-button-down,
  .p-inputnumber-button-up {
    border: 1px solid var(--os-accent);
    background-color: var(--os-accent);
    color: white;
  }

  /* 
.p-inputnumber-button.p-button-icon-only.p-component > svg {
    transform: scale(1.2);
    margin: 0.1rem;
} */

  /* .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
    //table striped rows colour
} */

  #os-data-table > div.p-paginator-bottom.p-paginator.p-component {
    border-width: 0 0 0 0;
  }

  .p-filter-column {
    padding: 0.5rem;
  }
}
