@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0 0 0 30px #fff;
  }
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  font-family: var(--ManageAvailability_fontFamily);
  overflow-y: auto;

  /* --- OVERRIDE DEFAULT STYLES START --- */

  & tbody tr {
    /* This will reset the <table> element zebra-skin
       coloring coming from the default styles */
    background-color: initial;
  }

  & td {
    /* This will reset the default border radius for first and last
    <td> element */
    &:first-child,
    &:last-child {
      border-radius: initial;
    }
  }

  & button {
    display: block;
    line-height: 1;
  }

  /* --- OVERRIDE DEFAULT STYLES END --- */
}

.calendar {
  width: var(--ManageAvailabilityCalendar_width);
  flex-shrink: 0;

  /* The desired space between header and calendar month title is 24px.
  The calendar component already includes 22px padding/margins, so
  we add only 2px */
  margin: 2px auto 0 auto;
}

.saveButtonContainer {
  /* This will position the button to the flexbox group bottom.
  See excellent SO answer: http://stackoverflow.com/a/33856609/432787 */
  margin-top: auto;
  height: calc(var(--ManageAvailability_saveButtonHeight) + var(--ManageAvailability_padding));
  min-height: calc(var(--ManageAvailability_saveButtonHeight) + var(--ManageAvailability_padding));
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.saveButton {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #fff;
  background-color: var(--colorReservedAvailability);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: var(--ManageAvailability_saveButtonHeight);
  width: var(--ManageAvailability_contentWidth);
  transition: bottom 0.5s;
  position: absolute;
  left: 50%;
  margin: 0 0 0 calc(-1 * (var(--ManageAvailability_contentWidth) / 2));
  bottom: calc(-2 * var(--ManageAvailability_saveButtonHeight));

  &:hover,
  &:active,
  &[disabled] {
    transition: background-color 0.1s ease-in;
    background-color: var(--colorReservedAvailabilityDark);
  }

  & :global(.availability_checkmark) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    stroke-width: 5;
    stroke: #2ab865;
    stroke-miterlimit: 10;
    margin: 0 auto;
    box-shadow: inset 0 0 0 #fff;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
  }

  & :global(.availability_checkmark__circle) {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #fff;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }

  & :global(.availability_checkmark__check) {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
}

.saveButtonVisible {
  bottom: var(--ManageAvailability_padding);
}