.tile {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: 0 1px 2px var(--medium-gray);
  transition: box-shadow 0.2s ease-in-out;
  position: relative;

  &:focus {
    &:before {
      content: '';
      //// Positioning the border with a 2px space between the border and the Tile. The -4px compensates for the box-shadow that is also in place. ////
      position: absolute;
      left: -4px;
      top: -4px;
      right: -4px;
      bottom: -4px;
      //// End of positiononing ////
      border: 2px solid var(--blue);
      border-radius: 8px;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.leftHeaderSection {
  display: flex;
  align-items: center;
  gap: 8px;
}

.headerText {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  color: var(--dark-purple);
}

.subtitle {
  white-space: nowrap;
}

.subtitle,
.subHeader {
  font-size: var(--font-size-12);
  color: var(--purple);
}

.actionButton {
  transform: rotate(90deg);
  svg circle {
    fill: var(--dark-purple);
  }
}

.menuPopover {
  padding: 0;
}

.buttonContainer {
  display: grid;
  gap: 16px;
  &.oneButton {
    grid-template-columns: 1fr;
  }
  &.twoButtons {
    grid-template-columns: repeat(2, 1fr);
  }
}