import { createGlobalStyle, css } from 'styled-components';
const radioStyle = css `
  .ant-radio-wrapper {
    span {
      color: ${({ theme }) => theme.text.primary};
    }

    .ant-radio-inner {
      border-color: ${({ theme }) => theme.radio.border};
      background-color: ${({ theme }) => theme.radio.bg};

      &:after {
        background-image: linear-gradient(
          180deg,
          ${({ theme }) => theme.gradient.from} 0%,
          ${({ theme }) => theme.gradient.to} 100%
        );
        transform: scale(1.2);
      }
    }

    .ant-radio-checked {
      .ant-radio-inner {
        border-color: ${({ theme }) => theme.main};
      }
    }

    &:hover,
    &:active,
    &:focus {
      .ant-radio-inner {
        border-color: ${({ theme }) => theme.main};
      }
    }

    .ant-radio-disabled .ant-radio-inner {
      border-color: ${({ theme }) => theme.radio.border} !important;

      &:after {
        background: ${({ theme }) => theme.radio.disabled.bg};
      }
    }

    .ant-radio-disabled + span {
      color: ${({ theme }) => theme.text.secondary};
    }
  }

  .ant-radio-group {
    .ant-radio-button-wrapper.ant-radio-button-wrapper {
      height: 32px;
      font-size: 14px;
      line-height: 30px;
      padding: 0 12px;

      background-color: transparent;

      color: ${({ theme }) => theme.text.secondary};
      border-color: ${({ theme }) => theme.text.secondary};
      &::before {
        background-color: transparent;
      }

      &:hover {
        color: ${({ theme }) => theme.main};
      }

      &.ant-radio-button-wrapper-checked {
        color: ${({ theme }) => theme.main};
        border-color: ${({ theme }) => theme.main};
        &::before {
          background-color: ${({ theme }) => theme.main};
        }
      }
    }

    &.ant-radio-group-solid {
      .ant-radio-button-wrapper {
        color: ${({ theme }) => theme.text.primary};
        border-color: ${({ theme }) => theme.input.border};
        &::before {
          background-color: ${({ theme }) => theme.input.border};
        }
        &.ant-radio-button-wrapper-disabled {
          color: ${({ theme }) => theme.text.secondary};
          border-color: ${({ theme }) => theme.background.disabled};
          &::before {
            background-color: ${({ theme }) => theme.background.disabled};
          }
        }

        &.ant-radio-button-wrapper-checked {
          color: ${({ theme }) => theme.text.primary};
          background-color: ${({ theme }) => theme.main};

          &.ant-radio-button-wrapper-disabled {
            color: ${({ theme }) => theme.text.secondary};
            border-color: ${({ theme }) => theme.background.disabled};
            background-color: ${({ theme }) => theme.background.disabled};
          }
        }
      }
    }
  }
`;
const RadioStyle = createGlobalStyle `${radioStyle}`;
export default RadioStyle;
