@use "_variables" as *;
@use "_mixins" as *;
@use "_form-mixins" as *;
@import "bootstrap/scss/mixins";

.root {
  display: flex;
}

@media screen and (max-width: $medium-view) {
  .root {
    margin-bottom: 150px;
  }
}

.video-header-block {
  border-radius: 14px;
  background-color: pvar(--bg-secondary-350);
}

.video-actions-container {
  position: sticky;
  top: pvar(--header-height);
  background-color: pvar(--bg);
  // On top of input group addons
  z-index: 3;
}

.video-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;

  h2 {
    flex-shrink: 1;
    color: pvar(--fg-350);
    font-weight: $font-bold;
    margin-bottom: 0;
    line-height: normal;

    @include font-size(1.5rem);
    @include ellipsis;
  }

  .watch-save {
    display: flex;
    gap: 1rem;
  }

  @media screen and (max-width: 1200px) {
    flex-direction: column;
    text-align: center;

    .cancel-button {
      display: none;
    }

    .watch-save {
      justify-content: center;
    }
  }

  @include on-small-main-col {
    .watch-button-label {
      display: none;
    }
  }

  @include on-mobile-main-col {
    padding: 0.5rem;
    gap: 0.5rem;
  }
}

.video-state {
  color: pvar(--fg-300);
  padding: 1rem 1.5rem;

  @include font-size(14px);
}
