@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.tools-container {
  @include flex-center;
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 8px;
  gap: 10px;
  box-shadow: #{$box-shadow-medium};
  border-radius: #{$border-radius-large};
  width: fit-content;
  background: var(--background-color);
  backdrop-filter: blur(20px);
  z-index: 2;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;
  transition: transform 0.4s ease-in-out 0.01s;

  &.visible {
    transform: translate(-50%, -310px);
  }

  .split {
    height: 20px;
    width: 2px;
    border-radius: #{$border-radius-small};
    background: var(--text-disabled);
  }

  .draw-tools,
  .transform-tools,
  .general-options,
  .activeDropicon {
    @include flex-center;
    gap: 2px;
    // stylelint-disable-next-line
    interpolate-size: allow-keywords;
    width: 0;
    opacity: 0;
    animation: expandWidth 0.2s ease-in-out forwards;
    will-change: width;

    .tool-button {
      @include flex-center;
      height: 28px;
      width: 28px;
      cursor: pointer;
      border-radius: #{$border-radius-medium};
      position: relative;

      &:hover {
        background: color-mix(
          in srgb,
          var(--highlight-accent-color) 60%,
          transparent
        );

        .tooltip {
          opacity: 1;
          transform: translateY(-2px);
        }
      }
    }

    .active {
      background: var(--background-color-accent);

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

  .activeDropicon {
    gap: 2px;

    .drop-down-option-button {
      @include flex-center;
      height: 28px;
      cursor: pointer;
      border-radius: #{$border-radius-small};
      position: relative;

      &:hover {
        background: color-mix(
          in srgb,
          var(--highlight-accent-color) 60%,
          transparent
        );
      }

      .drop-down-container {
        position: absolute;
        bottom: 40px;
        left: 0;
        padding: 2px 4px;
        border-radius: #{$border-radius-medium};
        background: var(--background-color);
        backdrop-filter: blur(8px);
        contain: layout paint;
        will-change: backdrop-filter;

        .option-list {
          display: flex;
          align-items: center;
          white-space: nowrap;
          border-radius: #{$border-radius-medium};
          gap: 6px;
          padding: 2px;
          padding-right: 12px;
          margin: 2px 0;

          &:hover {
            background: var(--highlight-accent-color);
            color: var(--accent-color);

            path {
              stroke: var(--accent-color);
            }
          }

          .active-option {
            height: 12px;
            width: 12px;
            @include flex-center;
          }

          .option {
            color: inherit;
          }
        }
      }
    }
  }

  .toggle-threed-button {
    @include flex-center;
    padding: 4px;
    border-radius: #{$border-radius-medium};
    background: var(--background-color);
    outline: 1px solid var(--border-color);
    outline-offset: -1px;
    gap: 5px;
    position: relative;

    &:hover {
      .tooltip {
        opacity: 1;
        transform: translateY(-4px);
      }
    }

    .toggle-option {
      font-size: var(--font-size-small);
      padding: 2px;
      z-index: 1;
      transition: all 0.2s;
      pointer-events: none;
    }

    &::after {
      content: "";
      position: absolute;
      background: var(--background-color-accent);
      left: 2px;
      top: 2px;
      height: 23px;
      width: 23px;
      border-radius: #{$border-radius-medium};
      transition: all 0.2s;
      pointer-events: none;
    }

    .active {
      color: var(--text-button-color);
    }
  }

  .toggled {
    &::after {
      left: 25px;
    }
  }
}


@keyframes pulse {
  0% {
    opacity: 0;
    scale: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    scale: 2;
  }
}

@keyframes expandWidth {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: fit-content;
    opacity: 1;
  }
}