"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledLink = void 0;
const Link_1 = __importDefault(require("@mui/material/Link"));
const SvgIcon_1 = require("../SvgIcon");
const styled_1 = require("../styled");
exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
  display: inline-flex;
  gap: ${({ theme }) => theme.spacing(1)};
  align-items: baseline;
  justify-content: flex-start;

  font-size: ${({ theme }) => theme.typography.fontSize};
  color: ${({ theme }) => theme.palette.components.link.main};
  text-decoration: none;

  &:active {
    color: ${({ theme }) => theme.palette.components.link.active};
  }

  &:visited {
    color: ${({ theme }) => theme.palette.components.link.visited};
  }

  &:hover {
    color: ${({ theme }) => theme.palette.components.link.hover};
    text-decoration: underline;
  }

  &:focus-visible {
    border-radius: ${({ theme }) => theme.shape.medium};
    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
  }

  .${SvgIcon_1.svgIconClassnames.root} {
    align-self: center;

    width: 16px;
    height: 16px;
  }
`;
