@use '../../../styles/mixins';

.root {
  --color-transition: 0.25s ease-in-out;
  --more-button-opacity: 0;
  --modal-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  --active-tab-background: var(--color-background);
  --state-transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99);
  :global {
    .modal-header {
      padding: 0.5rem;
      border-bottom: 1px solid var(--color-dividers);
      color: var(--color-header-text);
      transition: var(--color-transition) background-color, var(--color-transition) color;
    }

    .modal-dialog {
      pointer-events: auto;

      overflow: hidden;
      justify-content: center;

      height: 75%;
      margin: 0;
      border: none;

      box-shadow: none;
    }

    .resizeHandle {
      position: absolute;
      z-index: var(--z-resize-grip);
      background: transparent;

      &.top,
      &.bottom {
        cursor: ns-resize;

        right: 0;
        left: 0;

        width: 100%;
        height: 0.5rem;
      }

      &.left,
      &.right {
        cursor: ew-resize;

        top: 0;
        bottom: 0;

        width: 0.5rem;
        height: 100%;
      }

      &.top {
        top: 0;
      }

      &.bottom {
        bottom: 0;
      }

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }

      &.topLeft,
      &.topRight,
      &.bottomLeft,
      &.bottomRight {
        width: 0.5rem;
        height: 0.5rem;
      }

      &.topLeft {
        cursor: nwse-resize;
        top: 0;
        left: 0;
      }

      &.topRight {
        cursor: nesw-resize;
        top: 0;
        right: 0;
      }

      &.bottomLeft {
        cursor: nesw-resize;
        bottom: 0;
        left: 0;
      }

      &.bottomRight {
        cursor: nwse-resize;
        right: 0;
        bottom: 0;
      }
    }

    .modal-container {
      pointer-events: none;
    }

    .modal-content {
      overflow: hidden;
      display: flex;
      flex-direction: column;

      padding: 0;
      border-bottom-right-radius: var(--border-radius-default);
      border-bottom-left-radius: var(--border-radius-default);

      transition: 0.25s ease-in-out background-color;
    }

    @media (max-width: 600px) {
      .modal-dialog {
        max-width: 100% !important;
        height: 100%;
        border-radius: 0;
        background-color: var(--color-background);
      }

      .modal-content {
        max-height: none;
        border-radius: 0;
      }
    }
  }
}

.multi-tab {
  :global {
    .modal-dialog {
      width: 100%;
      max-width: 26.25rem;
      height: 100%;
      max-height: min(42.5rem, 85vh);

      background-color: var(--color-web-app-browser);
      backdrop-filter: blur(1.5625rem);
      box-shadow: var(--modal-shadow);

      /* stylelint-disable @stylistic/value-list-comma-newline-after */
      /* stylelint-disable plugin/no-low-performance-animation-properties */
      transition:
         max-height var(--state-transition), max-width var(--state-transition),
         left var(--state-transition), top var(--state-transition),
         transform 0.2s ease, opacity 0.2s ease;
    }

    .modal-header {
      padding: 0;
      padding-inline: 0.5rem;
      border-bottom: 0;
    }

    .modal-content {
      max-height: none;
      border-top-left-radius: var(--border-radius-default);
      border-top-right-radius: var(--border-radius-default);

      background-color: var(--color-background);
      box-shadow: var(--modal-shadow);
    }

    @media (max-width: 600px) {
      .modal-dialog {
        background-color: var(--color-web-app-browser);
      }
    }
  }

  .close-icon {
    position: absolute;
    transform: rotate(-45deg);
    opacity: 0.75;

    &,
    &::before,
    &::after {
      background-color: var(--color-text-secondary);
    }
  }
}

.minimized {
  :global {
    .modal-dialog {
      cursor: grab !important;
      min-width: 0;
      max-width: 300px;
      max-height: 2.5rem;
    }
  }
}

.fullScreen {
  :global {
    .modal-dialog {
      max-width: 100%;
      max-height: 100%;
      border-radius: 0;
    }
    .modal-content {
      border-radius: 0;
    }
  }
}

.tabs {
  scrollbar-color: rgba(0, 0, 0, 0);
  scrollbar-width: none;

  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;

  height: 100%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;

  white-space: nowrap;

  @include mixins.gradient-border-horizontal(0.5rem, 0.5rem);

  &::-webkit-scrollbar {
    height: 0;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
  }
}

.tool-bar {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.tab-button-wrapper {
  display: flex;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.tab-button {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  border-top-left-radius: var(--border-radius-default);
  border-top-right-radius: var(--border-radius-default);

  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-header-text);
  text-overflow: ellipsis;

  background-color: var(--active-tab-background);
  box-shadow: var(--modal-shadow);

  transition: var(--color-transition) background-color, var(--color-transition) color;

  &:hover,
  &:focus {
    --more-button-opacity: 1;

    .tab-right-mask {
      opacity: 1;
    }

    .tab-close-button {
      opacity: 1;
    }
  }
}

.tab-right-mask {
  @include mixins.gradient-border-left(2rem);

  position: absolute;
  right: 0;

  width: 4rem;
  height: 100%;
  border-top-right-radius: var(--border-radius-default);

  opacity: 0;
  background-color: var(--active-tab-background);

  transition: opacity 0.25s ease-in-out;
}

.tab-button-curve-path {
  fill: var(--active-tab-background);
  transition: var(--color-transition) fill;
}

.tab-button-left-curve,
.tab-button-right-curve {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: auto;

  transition: var(--color-transition) background-color, var(--color-transition) color;
}

.tab-button-right-curve {
  transform: scaleX(-1);
}

.more-apps-tab-icon,
.avatar-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}

.more-apps-tab-icon {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
}

.web-app-tab-more-menu {
  position: absolute;
  z-index: 1;
}

.more-button {
  color: var(--color-header-text) !important;
  opacity: 0.75;
  transition: var(--color-transition) color;
}

.tab-more-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 !important;

  font-size: 0.75rem;
  color: white !important;

  opacity: var(--more-button-opacity);
  background-color: rgba(0, 0, 0, 0.45) !important;

  transition: opacity 0.25s ease-in-out;
}

.more-apps-button,
.window-state-button,
.header-button {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.more-apps-button {
  margin-right: auto;
}

.fullscreenButton {
  margin-inline: 0.5rem;
}

.tab-close-button {
  position: absolute;
  right: 0.5rem;

  width: 1.5rem !important;
  height: 1.5rem !important;

  color: var(--color-header-text) !important;

  opacity: 0;

  transition: opacity 0.25s ease-in-out;
}

.tab-close-icon {
  font-size: 1rem !important;
  opacity: 0.75;
}

.state-icon,
.icon {
  opacity: 0.75;
}

.state-icon {
  font-size: 2rem !important;
}

.tab-avatar {
  cursor: var(--custom-cursor, pointer);
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

.close-icon {
  position: absolute;
  transform: rotate(-45deg);
  opacity: 0.75;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
  }

  &::before {
    transform: rotate(90deg);
  }

  &,
  &::before,
  &::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;

    background-color: var(--color-header-text);

    transition: var(--slide-transition) transform, var(--color-transition) background-color;
  }

  &.state-back {
    transform: rotate(180deg);

    &::before {
      transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
    }

    &::after {
      transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
    }
  }
}

.loading-spinner {
  pointer-events: none;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: opacity 0.25s ease-in-out;
}

.hide {
  opacity: 0;
}

.frame {
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;

  &.with-button {
    height: calc(100% - 3.5rem);
  }
}

.main-button {
  position: absolute;
  z-index: 1;
  bottom: 0;
  transform: translateY(100%);

  border-radius: 0;

  transition-timing-function: ease-in-out;
  transition-duration: 0.25s;
  transition-property: background-color, color, transform;

  &.visible {
    transform: translateY(0);
  }

  &.hidden {
    visibility: hidden;
  }
}

.main-button-spinner {
  position: absolute;
  right: 1rem;
}

.web-app-popup {
  :global(.modal-dialog) {
    max-width: min(30rem, 100%);
  }

  &.without-title :global(.modal-content) {
    padding-top: 0;
  }

  :global(.modal-content) {
    padding-left: 2rem;
  }
}
