/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';

import {theme} from 'components/shared/theme';

const {colors, typography: {fontSizeS}} = theme;

export const ToggleContainer = styled.default.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ToggleTitle = styled.default.p`
  color: ${colors.white};
  font-size: ${fontSizeS};
  transition: all .2s ease-in-out;
`;

export const ToggleTitleOn = styled.default(ToggleTitle)`
  opacity: 1;
`;
export const ToggleTitleOff = styled.default(ToggleTitle)`
  opacity: 0.5;
`;

export const ToggleSwitchContainer = styled.default.label`
  margin: 0 1rem;
  width: 3rem;
  height: 1.5rem;
  background-color: transparent;
  border: 2px solid ${colors.gray700};
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
`;

export const ToggleSwitch = styled.default.div`
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: ${colors.lightBlue};
  border-radius: 40px;
  left: .2rem;
  transition: left 200ms linear;
`;

export const ToggleHiddenInput = styled.default.input`
  display: none;

  &:checked {
    ~${ToggleTitleOff} {
      opacity: 0.5;
    }
    ~${ToggleTitleOn} {
      opacity: 1;
    }
    ~${ToggleSwitchContainer} {
      ${ToggleSwitch} {
        left: 1.6rem;
      }
    }
  }
`;