Dwinzo_dev/app/src/styles/components/tools.scss

@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;
  transition: width 0.2s;
  background: var(--background-color);
  backdrop-filter: blur(8px);
  z-index: 2;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;

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

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

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

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

    .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;

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

    &::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;
    }

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

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

.exitPlay {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--highlight-accent-color);
  cursor: pointer;
  @include flex-center;
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, 0);
  color: var(--accent-color);
  z-index: 100;
  isolation: isolate;
  font-weight: 700;
  &:hover {
    font-weight: 500;
    background: var(--accent-color);
    color: var(--highlight-accent-color);
    &::after{
      animation: pulse 1s ease-out infinite;
    }
  }
  &::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--background-color-secondary);
    border-radius: #{$border-radius-circle};
    z-index: -1;
  }
}

@keyframes pulse {
  0%{
    opacity: 0;
    scale: .5;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    scale: 2;
  }
}

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

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