@import './md/ancy/index.scss';
@import './theme.scss';

.ant-dropdown-menu-item-active {
  color: var(--primary-color) !important;
}
.ant-dropdown {
  backdrop-filter: blur(10px);
  background-color: var(--background-color-1) !important;

  .ant-dropdown-menu {
    background-color: transparent !important;
  }
}
.ant-drawer-mask {
  backdrop-filter: blur(10px);
}
.ant-drawer-content-wrapper {
  backdrop-filter: blur(2px);
  background-color: var(--background-color-1) !important;
  box-shadow: none !important;
}

.ant-btn-icon-only {
  backdrop-filter: blur(2px);
  background-color: transparent !important;
}

.ant-tooltip {
  backdrop-filter: blur(4px);
  color: var(--text-color) !important;
  --antd-arrow-background-color: var(--background-color-1) !important;
}
.ant-tooltip-inner {
  background-color: var(--background-color-1) !important;
  color: var(--text-color) !important;
}

.ant-modal-content {
  background-color: transparent !important;
  box-shadow: none !important;
}
.ant-form-item {
  margin-bottom: 0 !important;
}

div.timeline_container div.ant-timeline-item-label {
  width: calc(5rem - 12px) !important;
}

div.timeline_container div.ant-timeline-item-content {
  left: calc(5rem - 4px) !important;
  width: calc(100% - 5rem - 4px) !important;
}

div.timeline_container div.ant-timeline-item-tail,
div.ant-timeline-item-head {
  left: 5rem !important;
}

::selection {
  background-color: var(--primary-color);
  color: white;
}

a {
  position: relative;
  text-decoration: none;
  color: var(--text-color);

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
  }

  &:hover::after {
    transform: scaleX(1);
  }
}

.title {
  @apply text-2xl font-bold text-center md:text-left;
}

.summary {
  @apply text-sm text-gray mt-2 mb-16 text-center md:text-left;
}

.content {
  @apply max-w-3xl mx-auto px-3;
}
