:host {
  /**
  * @prop --background-color: The background color used for the dropdown menu.
  */
  --background-color: white;
  /**
  * @prop --font-color: The font color used for the dropdown menu.
  */
  --font-color: black;
  /**
  * @prop --font-name: The font used for the dropdown menu.
  */
  --font-name: inherit;
  /**
  * @prop --font-size: The font size used for the dropdown menu.
  */
  --font-size: inherit;
  /**
  * @prop --font-weight: The font weight used for the dropdown menu.
  */
  --font-weight: 400;
  /**
  * @prop --highlight-color: The highlight color used for the user's selection in the dropdown menu.
  */
  --highlight-color: yellow;
  /**
  * @prop --list-item-padding: Controls the padding between each list element.
  */
  --list-item-padding: 5px;
}

.dxp-calendar-link {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.dxp-calendar-link__wrapper {
  zoom: 1;
  cursor: pointer;
}

.dxp-calendar-link__button {
  padding: 10px;
  color: #000;
  display: inline-block;
}

.dxp-calendar-link__button > span {
  display: inline-flex;
}

.dxp-calendar-link__button--label {
  margin-top: auto;
  margin-bottom: auto;
}

.dxp-calendar-link__button--light {
  background-color: #fff;
}

.dxp-calendar-link__icon--right {
  padding-left: 5px;
}

.dxp-calendar-link__icon--left {
  padding-right: 5px;
}

.dxp-calendar-link__dropdown {
  position: absolute;
  width: auto;
  /* padding: 5px 0 5px 8px; */
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid #a8a8a8;
  background-color: var(--background-color);
  text-align: left;
  font-family: var(--font-name);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  z-index: 90;
}

.dxp-calendar-link__dropdown--title {
  white-space: nowrap;
  padding: 1em 1em 1em 0px;
  font-weight: 800;
}

.dxp-calendar-link__dropdown > ul {
  list-style: none;
  margin: 0;
  padding-inline-start: 30px;
  padding-inline-end: 30px;
}

.dxp-calendar-link__dropdown li a {
  color: var(--font-color);
  text-decoration: none;
  display: flex;
  padding: var(--list-item-padding);
}

.dxp-calendar-link__dropdown li a:hover {
  background-color: var(--highlight-color);
}

.dxp-calendar-link__dropdown li a > i {
  padding-right: 10px;
}

.dxp-calendar-link__dropdown li a > span {
  margin-top: auto;
  margin-bottom: auto;
}

.outlook-st0 {
  fill: none;
}

.outlook-st1 {
  fill: #daa603;
}

.outlook-live-st0 {
  fill: none;
}
.outlook-live-st1 {
  fill: #0072c6;
}

.yahoo-st0 {
  fill: none;
}
.yahoo-st1 {
  fill: #4a089f;
}

.apple-st0 {
  fill: none;
}
.apple-st1 {
  fill: #606060;
}

.google-st0 {
  fill: none;
}
.google-st1 {
  fill: #fbbc05;
}
.google-st2 {
  fill: #ea4335;
}
.google-st3 {
  fill: #34a853;
}
.google-st4 {
  fill: #4285f4;
}