@import '../../styles/core.scss';

.DashHeader {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 50px 10px;
  border-bottom: solid 1px #e2e2e2;

  &-Title {
    align-self: center;
    display: flex;

    &-Icon {
      align-items: center;
      color: get(color 'shale');
      display: inline-flex;
      margin-right: 10px;
    }
  }

  &-Link {
    text-decoration: none;
  }

  &-ExternalIcon {
    margin-left: 5px;
    transform: rotate(45deg);
  }
}

.Staging {
  display: flex;
  flex-direction: column;
  position: relative;

  &-LoadMore {
    padding: 0 270px 50px;
    background: get(color 'lightGray');
  }

  &-Deployed {
    margin-top: 20px;
    position: absolute;
    right: 50px;
    align-items: center;
    background: get(color 'lightGray');
    border-radius: 6px;
    color: get(color 'slate');
    display: inline-flex;
    font-size: 13px;
    padding: 10px 15px;
    text-align: center;

    i {
      margin-right: 5px;
    }
  }

  &-Timeline {
    padding: 25px 50px;

    &-Heading {
      width: 200px;
    }

    &-Day {
      display: flex;
      font-size: 14px;
      flex-direction: column;
      width: 100%;

      + .Staging-Timeline-Day {
        border-top: 1px solid get(color 'ivory');
        padding-top: 10px;
      }

      &-Owlet {
        margin-bottom: 10px;
        margin-top: 10px;
      }

      &-Deployed {
        align-items: center;
        background: get(color 'ivory');
        border-radius: 9px;
        color: get(color 'slate');
        display: inline-flex;
        font-size: 13px;
        padding: 10px 15px;
        text-align: center;

        &-Icon {
          margin-right: 5px;
        }
      }
    }

    &-Content {
      flex: 1 1 auto;
    }
  }
}

.StagingModal {
  overflow: visible;
  position: relative;

  &-Link {
    color: get(color 'shale');
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
      text-decoration: underline;
    }

    &-ExternalIcon {
      margin-left: 5px;
      transform: rotate(45deg);
    }
  }

  &-HeaderIcon {
    margin-right: 10px;

    &_green {
      color: get(color 'green');
    }

    &_red {
      color: get(color 'red');
    }
  }

  &-Body_owlbert {
    overflow: visible;
    padding-bottom: 60px;
    position: relative;
  }

  &-Error {
    background: get(color 'lightGray');
    border-radius: 6px;
    color: get(color 'slate');
    padding: 20px;
  }

  &-Owlbert_confetti {
    bottom: -50px;
    height: 200px;
    left: -20px;
    margin: auto;
    pointer-events: none;
    position: absolute;
    right: auto;
    width: auto;
  }
}