.tab-bar:not([hidden]) {
  display: flex;
  position: sticky;
  inset-block-start: 0;
  flex-shrink: 0;
  /* justify-content: center; */
  z-index: 10;
  box-shadow: inset 0 -1px 0 hsl(203deg 28% 68% / 20%);
  background: linear-gradient(to bottom,
      #2D608B,
      #2D608B,
      #2D5E88,
      #2C5981,
      #2C557A);
  min-block-size: 64px;
  inline-size: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-width: none;
  scroll-behavior: smooth;

  .separator {
    display: inline-flex;
    align-items: center;

    &::before {
      background-color: #497295;
      block-size: 66.6667%;
      inline-size: 1px;
      content: "";
    }
  }

  .tab {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: inset 0 -1px 0 #97B3C5;
    background: none;
    cursor: pointer;
    padding: 0 1em 8px;
    min-inline-size: 79px;
    color: #9FB9CE;

    &:hover {
      box-shadow: none;
      background: linear-gradient(to bottom,
          #03415E,
          #06496A,
          #084B6D,
          #094B6D,
          #0C5479);
      color: #9FB9CE;
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 -2.5px 0 #97B3C5;
      background: linear-gradient(to bottom,
          #03415E,
          #06496A,
          #084B6D,
          #094B6D,
          #0C5479);
      text-shadow: 0 2px 2px hsl(0deg 0% 0% / 100%);
      color: white;
    }

    &:focus-visible,
    &:active {
      .tab-icon {
        #tab-stopwatch & {
          background: url("../assets/images/clock_tab_stopwatch_press.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }

        #tab-timer & {
          background: url("../assets/images/clock_tab_timer_press.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }

        #tab-clock & {
          background: url("../assets/images/clock_tab_deskclock_press.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }
        
        #tab-settings & {
          background: url("../assets/images/tw_action_bar_icon_setting_holo_dark.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }
      }
    }

    .tab-icon {
      display: inline-block;
      block-size: 32px;
      inline-size: 32px;

      #tab-stopwatch & {
        background: url("../assets/images/clock_tab_stopwatch.svg") no-repeat center/cover;
      }

      #tab-timer & {
        background: url("../assets/images/clock_tab_timer.svg") no-repeat center/cover;
      }

      #tab-clock & {
        background: url("../assets/images/clock_tab_deskclock.svg") no-repeat center/cover;
      }
      
      #tab-settings & {
        background: url("../assets/images/clock_tab_settings.svg") no-repeat center/cover;
      }
    }

    &.tab-active {
      box-shadow: inset 0 -4px 0 #97B3C5;
      text-shadow: 0 2px 2px hsl(0deg 0% 0% / 100%);
      color: white;

      .tab-icon {
        #tab-stopwatch & {
          background: url("../assets/images/clock_tab_stopwatch_press.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }

        #tab-timer & {
          background: url("../assets/images/clock_tab_timer_press.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }

        #tab-clock & {
          background: url("../assets/images/clock_tab_deskclock_press.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }
        
        #tab-settings & {
          background: url("../assets/images/tw_action_bar_icon_setting_holo_dark.svg") no-repeat center/cover;
          filter: drop-shadow(0 2px 2px black);
        }
      }
    }
  }
}