.topbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.625rem 1.5rem;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0 0.063rem 0.25rem;
  z-index: 9999999;
  @apply flex items-center;

  img {
    display: inline;

    &.city {
      margin-right: 0.5rem;
      height: 3rem;
      width: 3rem;
    }

    &.state {
      height: 1.25rem;
      max-height: 1.25rem;
      width: auto;
    }
  }

  .ulb {
    font-weight: bold;
    display: inline-block;
  }

  .right {
    float: right;
    margin-top: 0.75rem;
    position: relative;

    svg {
      display: inline;
    }

    .user-img-txt {
      background: theme(colors.primary.main);
      padding: 0.625rem 0.938rem;
      border-radius: 50%;
      color: white;
      font-weight: 700;
    }
  }

  .left {
    float: left;
  }

  .w-80 {
    width: 70%;
  }

  .width-20 {
    width: 30%;
  }

  .margin-top-6 {
    margin-top: 0.375rem;
  }

  .margin-right-30 {
    margin-right: 1.875rem;
  }

  .margin-top-10 {
    margin-top: 0.625rem;
  }

  .icon {
    display: block;
    color: rgb(117, 117, 117);
    fill: rgb(117, 117, 117);
    height: 1.313rem;
    width: 1.313rem;
  }

  .column-gap-15 {
    column-gap: 0.938rem;
  }

  .column-gap-5 {
    column-gap: 0.313rem;
  }

  .select-wrap,
  .employee-select-wrap {
    margin-bottom: 0rem;

    .profile-dropdown--item {
      span {
        white-space: pre;
      }
    }
  }

  .digit-employee-select-wrap {
    margin-bottom: 0rem;
  }

  .digit-topbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  @media screen and (min-width: 40.063rem) {
    .digit-hamburger-class {
      display: none !important;
    }
  }

  @media screen and (max-width: 40rem) {

    .ulb {
      font-size: 0.875rem;
      display: inline-block;
    }

    .flex-right {
      display: none;
    }

    .digit-employee-select-wrap {
      right: 0;
    }
  }
}

.cp {
  cursor: pointer;

  .hamburger {
    display: none;
  }

  @media (max-width: 48.75rem) {
    .hamburger {
      display: none;
    }
  }
}

.citizen {
  .right {
    margin-top: 0.313rem;
    margin-bottom: 0.313rem;
  }

  .topbar-select-wrap {
    margin-bottom: 0;
  }

  .flex-between {
    @apply flex items-center justify-between;
  }
}

.profile-dropdown--item {
  display: flex;
  flex-direction: row;
  padding: 0.625rem;
  column-gap: 0.625rem;
  color: theme(colors.text.secondary);

  &:hover {
    background: theme(colors.grey.mid);
  }
}

.flex-right {
  @apply flex items-center justify-end;
  min-width: 5.313rem;
}

video::-webkit-media-controls-panel {
  top: 55%;
  position: absolute;
  width: 100%;
}

.topbarOptionsClassName {
  right: -3rem !important
}

.digit-topbar {
  @apply w-full max-w-full fixed items-center;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  background-color: theme(digitv2.lightTheme.paper-primary);
  height: 4.5rem;
  padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10);

  .margin-top-10 {
    margin-top: 0.625rem;
  }

  .digit-dropdown-select-wrap ,
  .digit-dropdown-employee-select-wrap {
    margin-bottom: 0rem;

    .digit-dropdown-item {
      span {
        white-space: pre;
      }
    }
  }

  .digit-employee-select-wrap {
    margin-bottom: 0rem;
  }


  .digit-dropdown-item {
    display: flex;
    flex-direction: row;
    padding: theme(digitv2.spacers.spacer3);
    column-gap: 0.625rem;
    color: theme(colors.text.secondary);

    &:hover {
      background: theme(colors.grey.mid);
    }
  }

  @media (min-width: 48rem) {
    justify-content: space-between;
  }

  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
    padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
    gap: theme(digitv2.spacers.spacer4);
  }

  @media (max-width: 30rem) {
    height: 3.5rem;
    padding: theme(digitv2.spacers.spacer4);
    gap: theme(digitv2.spacers.spacer4);
  }

  &.light {
    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
  }

  .digit-logo-ulb-wrapper {
    display: flex !important;
    gap: theme(digitv2.spacers.spacer4);
    align-items: center !important;
    max-width: calc(50%-(theme(digitv2.spacers.spacer6)));

    @media (min-width: 48rem) {
      height: theme(digitv2.spacers.spacer8);
    }

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      height: theme(digitv2.spacers.spacer8);
    }

    @media (max-width: 30rem) {}

    .digit-topbar-logo {
      flex-shrink: 0;
      height: theme(digitv2.spacers.spacer8);
      width: 1.291rem;

      &.clickable {
        cursor: pointer;
      }
    }

    .digit-topbar-ulb {
      @extend .typography.heading-s;
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.bold);
      line-height: theme(digitv2.lineHeight.lineheight1);
  
      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        font-size: theme(digitv2.fontSize.heading-s.mobile);
      }
  
      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: theme(digitv2.fontSize.heading-s.tablet);
      }
  
      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: theme(digitv2.fontSize.heading-s.desktop);
      }
      @apply whitespace-no-wrap overflow-hidden;
      color: theme(digitv2.lightTheme.text-primary);
      text-overflow: ellipsis;
    }
  }

  &.dark {
    background-color: theme(digitv2.lightTheme.primary-2);

    .digit-logo-ulb-wrapper {
      .digit-topbar-ulb {
        color: theme(digitv2.lightTheme.paper-primary);
      }
    }

    .digit-header-action-fields {
      .individual-action-field {
        color: theme(digitv2.lightTheme.paper-primary);

        .digit-dropdown-employee-select-wrap,
        .digit-dropdown-select-wrap{
          background:none;
        }
      }
    }
  }

  .digit-header-action-fields {
    @apply items-center overflow-hidden;
    display: flex !important;
    height: theme(digitv2.spacers.spacer8);
    max-width: 50%;


    @media (min-width: 48rem) {
      gap: theme(digitv2.spacers.spacer8);
    }

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      gap: theme(digitv2.spacers.spacer4);
    }

    .digit-header-img {
      &.clickable {
        cursor: pointer;
      }
    }
  }

  .digit-topbar-hamburger {
    width: theme(digitv2.spacers.spacer6);
    height: theme(digitv2.spacers.spacer6);

    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
      width: theme(digitv2.spacers.spacer8);
      height: theme(digitv2.spacers.spacer8);

      svg {
        width: theme(digitv2.spacers.spacer8);
        height: theme(digitv2.spacers.spacer8);
      }
    }

    &.clickable {
      cursor: pointer;
    }

  }

  .digit-header-img-ulb-wrapper-mobileview {
    display: flex;
    align-items: center;
    height: theme(digitv2.spacers.spacer6);
    max-width: calc(100%-(theme(digitv2.spacers.spacer6)));

    .digit-header-img {
      margin-right: theme(digitv2.spacers.spacer2);
      margin-bottom: 0.156rem;

      &.clickable {
        cursor: pointer;
      }
    }

    .topbar-divider {
      height: theme(digitv2.spacers.spacer6);
      width: 0.063rem;
      border: 0.063rem solid theme(digitv2.lightTheme.text-primary);
      margin-right: 0.625rem;

      &.dark {
        border: 0.063rem solid theme(digitv2.lightTheme.paper-primary);
      }

    }

    .digit-topbar-ulb-mobileview {
      @apply overflow-hidden whitespace-no-wrap;
      @extend .typography.body-s;
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.regular);
      line-height: theme(digitv2.lineHeight.lineheight2);
  
      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        font-size: theme(digitv2.fontSize.body-s.mobile);
      }
  
      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: theme(digitv2.fontSize.body-s.tablet);
      }
  
      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: theme(digitv2.fontSize.body-s.desktop);
      }
      text-overflow: ellipsis;
      color: theme(digitv2.lightTheme.text-primary);

      &.dark {
        color: theme(digitv2.lightTheme.paper-primary);
      }
    }

  }
}