.buttons {
  position: sticky;
  z-index: 10;
  top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;

  & .playButton {
    display: flex;
    width: 150px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 100px;
    border-top: 2px solid #818cf8;
    border-bottom: 3px solid #4f46e5;
    background-color: #6366f1;
    color: var(--color-foreground);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--font-base);
    line-height: 0;
    outline: none;

    &:disabled,
    &.disabled {
      cursor: not-allowed;
    }

    & span {
      font-size: var(--font-lg);
    }
  }

  & .smallButton {
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 100px;
    border-top: 2px solid var(--color-neutral-950);
    border-bottom: 3px solid var(--color-neutral-600);
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-200);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--font-md);
    line-height: 0;
    outline: none;
    transition: 0.2s;

    &:disabled,
    &.disabled {
      cursor: not-allowed;
    }

    &.restore {
      border-top-color: #34d399;
      border-bottom-color: #047857;
      background-color: #10b981;
      color: var(--color-foreground);
    }

    &.delete {
      border-top-color: #fb7185;
      border-bottom-color: #be123c;
      background-color: #f43f5e;
      color: var(--color-foreground);
    }
  }

  & .tooltip {
    padding: 6px 12px;
    border: 1px solid var(--color-neutral-200);
    border-radius: 100px;
    background-color: var(--color-neutral-100);
    font-size: var(--font-xsm);
  }
}
