.nav-bar {
   display : flex;
   gap     : var(--panel-gap);
   align-items: center;
}

.file-picker {
   align-items     : center;
   border-radius   : var(--global-border-radius);
   display         : flex;
   height          : var(--file-picker-height);
   justify-content : center;
   max-width       : var(--file-picker-max-width);
   padding-left    : var(--file-picker-padding);
   padding-right   : calc(var(--file-picker-padding) / 2);
   text-align      : center;

   &:hover,
   &:has(:focus-visible) {
      color : var(--global-text-color_base);
   }

   /* &:has(:focus-visible) {
      outline          : 1px solid;
      outline-offset   : -1px;
      background-color : var(--button-bg-focus);
      outline-color: red;
   } */
}

.button .file-picker-text {
   color         : var(--global-text-color_soft);
   display       : inline-block;
   overflow      : hidden;
   white-space   : nowrap;
   text-overflow : ellipsis;
}

/* Hide the file select input from view */
.file-select {
   width  : 0;
   outline: none;
}

.location-bar {
   display         : flex;
   justify-content : center;
   align-items     : center;
   gap             : var(--location-bar-gap);
   flex            : 1;
   height          : var(--location-bar-height);

   > div {
      height           : var(--location-bar-height);
      display          : flex;
      padding          : var(--location-bar-padding);
      border-radius    : var(--global-border-radius);
      background-color : var(--location-bar-bg);
      gap              : calc(var(--location-bar-gap)/2 + 1px);
   }
}


.nav-bar :is(button, :where(.button)),
.address-wrapper {
   border        : var(--button-stroke);
   border-color  : revert;
   border-radius : var(--global-border-radius);
   color         : var(--global-text-color_base);
}

/* Style for default state */
.nav-bar *:is(button, :where(.button)):not(:hover,:focus,:focus-visible,:focus-within,:active),
.address-wrapper {
   background-color : transparent;
}

.nav-bar *:is(button, :where(.button)) {
   height       : var(--nav-button-height);
   aspect-ratio : 1;

   /* outline-color: transparent; */

}


.address-bar {
   color            : var(--global-text-color_base);
   background-color : transparent;
   height           : var(--address-bar-height);
   border           : none;

   &:focus-visible,
   &:focus {
      outline: none;
   }
}

.address-wrapper {
   color            : var(--global-text-color_base);
   height           : 100%;
   display          : flex;
   flex             : 1;
   align-items      : center;
   padding          : var(--location-bar-gap);
   background-color : var(--address-bar-bg);
   

}

.address-wrapper:focus-within {
   /* background-color : hsl(from var(--address-bar-bg) h s calc(l + 5)); */

   &:not(:has(.btn-submit:focus-visible)) {
      outline : var(--focus-stroke-size) solid var(--focus-stroke-color);
   }
   
   /* Show the submit button */
   .btn-submit {
      display: revert;
   }

}


button.btn-submit {
   height: calc(var(--address-bar-height) - var(--location-bar-padding));
   display: none;

   &:hover { background-color : var(--button-bg-hover); }
}

.nav-buttons {
   flex-basis: var(--nav-buttons-wrapper-width);
}

.location-bar > div {
   flex: 1;
   align-items: center;
}