import styled from "styled-components";
export const Wrapper = styled.div `
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;
  background-color: ${({ theme }) => theme.new?.colors?.primary350 ?? "#ECE3D0"};
  border-radius: 50%;
  position: relative;
  user-select: none;

  .circle {
    &__mask,
    &__fill {
      width: ${({ size }) => size}px;
      height: ${({ size }) => size}px;
      clip: ${({ size }) => `rect(0, ${size}px, ${size}px, ${size / 2}px)`};
      position: absolute;
      border-radius: 50%;
    }

    &__fill {
      clip: ${({ size }) => `rect(0, ${size / 2}px, ${size}px, 0)`};
      background-color: ${({ theme }) => theme.new?.colors?.primary950};
    }

    &__inner {
      width: ${({ size, barWidth }) => size - (barWidth ?? 4)}px;
      height: ${({ size, barWidth }) => size - (barWidth ?? 4)}px;

      display: grid;
      place-items: center;

      border-radius: 50%;
      background: #fff;
      margin: 2px;
      position: absolute;
      z-index: 1;
    }
  }

  .rotate {
    transform: rotate(${({ percent }) => percent * 1.8}deg);
  }
`;
//# sourceMappingURL=round-progress.styled.js.map