"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledBreadcrumbs = void 0;
const Breadcrumbs_1 = __importDefault(require("@mui/material/Breadcrumbs"));
const ButtonBase_1 = require("@mui/material/ButtonBase");
const Link_1 = require("@mui/material/Link");
const styled_1 = require("../styled");
exports.StyledBreadcrumbs = (0, styled_1.styled)(Breadcrumbs_1.default) `
  .${ButtonBase_1.buttonBaseClasses.root} {
    align-items: end;

    min-height: 20px;

    border-radius: ${({ theme }) => theme.shape.medium};

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

    &:hover {
      &::after {
        content: '';

        position: absolute;
        bottom: 3px;
        left: ${({ theme }) => theme.microSpacing(3)};

        width: ${({ theme }) => theme.spacing(3)};
        height: 1px;

        background-color: currentColor;
      }
    }
  }
  
  .MuiTypography-body1 {
    color: ${({ theme }) => theme.palette.primary[800]};
  }

  .${Link_1.linkClasses.root} {
    color: ${({ theme }) => theme.palette.grey[700]};

    &:visited {
      color: ${({ theme }) => theme.palette.grey[700]};
    }
    
    &:hover {
      color: ${({ theme }) => theme.palette.grey[800]};
    }
  }
`;
