@mixin timeZoneLabel() {
  .esri-time-zone-label {
    @include defaultBoxShadow();

    display: inline-flex;
    background-color: var(--calcite-color-foreground-1);

    &__badge {
      display: flex;
      padding-block: var(--calcite-spacing-sm);
      padding-inline: var(--calcite-spacing-sm);
      color: var(--calcite-color-text-1);

      &--disabled {
        opacity: var(--calcite-color-opacity-disabled);
      }

      &--hidden {
        display: none;
      }

      &-icon {
        align-self: center;
      }
    }

    &__name {
      align-self: center;
      padding-inline: var(--calcite-spacing-sm);
      color: var(--calcite-color-text-1);
      font-size: var(--calcite-font-size--2);

      &--disabled {
        opacity: var(--calcite-color-opacity-disabled);
      }

      &--hidden {
        display: none;
      }
    }
  }
}

@if $include_TimeZoneLabel == true {
  @include timeZoneLabel();
}