@use 'globals';

$background-color: #fff;
$tab-button-color-active: #0001;

.container-positioner {
  position: fixed;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
  width: 100%;
  height: 0;
}

.container {
  display: grid;
  grid-template-columns: max-content max-content 1rem max-content;
  filter: drop-shadow(globals.$popover-shadow);
}

.tab-box {
  @include globals.rounded;
  height: 3rem;
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 0.5rem;
  margin: 0;
  border: globals.$popover-border;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: $background-color;
  grid-row: 2;

  &__button {
    @include globals.reset-button;
    @include globals.rounded-sm;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    height: 2rem;

    &--active {
      background: $tab-button-color-active;
    }
  }
}

.control-bar {
  @include globals.rounded;
  height: 3rem;
  flex-shrink: 0;
  border: globals.$popover-border;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  width: 40rem;
  grid-row: 2;
  background: $background-color;

  &--open {
    border-top-right-radius: 0;
  }
}

.control-buttons {
  height: 3rem;
  gird-row: 2;
  grid-column: 4;
  height: 100%;
}

.control-panel-positioner {
  grid-template-columns: subgrid;
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: visible;
  /* Flexbox positioning is required for Safari */
  display: flex;
  align-items: flex-end;
  anchor-name: --control-bar;
}

.control-panel__container:popover-open {
  @include globals.rounded;
  inset: unset;
  border: globals.$popover-border;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  position: fixed;
  display: block;
  width: 40rem;
  /* Anchor positioning is required for Chromium */
  position-anchor: --control-bar;
  position-area: top;
  padding: 0;
  background: $background-color;
  box-shadow: globals.$popover-shadow;
  /* Clip drop shadow */
  clip-path: polygon(
    -100% -100%,
    200% -100%,
    200% 200%,
    100% 200%,
    100% 100%,
    -100% 100%
  );
}

.control-panel {
  padding: 0.5rem;
  overflow: auto;
  max-height: 8rem;
}