.manage-policies-page {
  @include vertical-page-layout;

  &__header-wrap {
    display: flex;
    flex-direction: column;
    gap: $pad-xsmall;
  }

  &__header {
    @include normalize-team-header;

    .button-wrap {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
    }
  }

  &__manage-automations-wrapper {
    @include button-dropdown;
    .Select-multi-value-wrapper {
      width: 146px;
    }

    // When tabbing through the app
    .manage-policies-page__manage-automations-dropdown {
      &.is-focused {
        outline: 2px solid $ui-vibrant-blue-25;
      }
    }

    .Select > .Select-menu-outer {
      left: -186px;
      width: 360px;
    }
    .Select-input {
      padding: 8px;
    }

    .Select-control {
      margin-top: 0;
      gap: 6px;
      .Select-placeholder {
        color: $core-vibrant-blue;
        font-weight: $bold;
      }
      .dropdown__custom-arrow .dropdown__icon {
        svg {
          path {
            stroke: $core-vibrant-blue-over;
          }
        }
      }
    }
  }

  &__header {
    display: flex;
    align-items: center;

    .form-field {
      margin-bottom: 0;
    }

    &__tooltip {
      text-align: center;
    }
  }

  &__text {
    margin-right: $pad-large;
  }

  &__title {
    font-size: $large;

    .fleeticon {
      color: $core-fleet-blue;
      margin-right: 15px;
    }

    .fleeticon-success-check {
      color: $ui-success;
    }

    .fleeticon-offline {
      color: $ui-error;
    }
  }

  &__action-button-container {
    display: flex;
    align-items: flex-start;
  }

  &__advanced-button {
    margin-right: $pad-medium;
  }

  &__sandbox-info {
    margin-top: $pad-large;
    margin-bottom: $pad-xxlarge;

    p {
      font-size: $x-small;
      margin: 0;
      margin-bottom: $pad-medium;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  &__add-policy-link {
    transition: color 150ms ease-in-out, background 150ms ease-in-out,
      top 50ms ease-in-out, box-shadow 50ms ease-in-out, border 50ms ease-in-out;
    position: relative;
    color: $core-fleet-white;
    text-decoration: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: $pad-medium;
    padding-right: $pad-medium;
    border-radius: $border-radius;
    font-size: $x-small;
    font-family: "Inter", sans-serif;
    font-weight: $bold;
    display: inline-flex;
    height: 38px;
    top: 0;
    border: 0;
    cursor: pointer;

    @include button-variant(
      $ui-fleet-black-75,
      $ui-fleet-black-75-over,
      $ui-fleet-black-75-down
    );
  }

  &__details {
    display: inline-flex;
    vertical-align: middle;
    margin-left: $pad-small;
    margin-top: -20px;

    .help-text {
      color: $core-fleet-black;

      &--brand {
        color: $core-vibrant-blue;
      }
    }
  }

  &__inherited-policies-button {
    padding-bottom: $pad-large;
  }

  &__inherited-policies-table {
    th {
      border-right: 1px solid #e2e4ea !important;
    }

    .table-container__header {
      display: none;
    }
  }

  .critical-tooltip,
  .inherited-tooltip {
    font-weight: $regular;
  }

  .critical-policy-icon {
    margin-left: 1px;
    position: relative;
  }

  .policies-table {
    .data-table-block {
      .data-table {
        tbody {
          .critical-badge,
          .policy-has-not-run {
            .critical-badge-icon {
              display: inline-flex;
            }

            @include tooltip5-arrow-styles;

            .react-tooltip {
              @include tooltip-text;
              font-style: normal;
              text-align: center;
            }
          }

          .inherited-badge {
            overflow: initial;
          }
        }
      }
    }
  }

  // Used in CalendarEventsModal, InstallSoftwareModal, and OtherWorkflowsModal
  .automated-policies-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid $ui-fleet-black-10;
    // negate ul padding
    padding-left: 0;
    margin: 0;

    .policy-row {
      display: flex;
      max-width: 100%;
      padding: 8px 12px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      border-bottom: 1px solid $ui-fleet-black-10;
      gap: 20px;

      .form-field--checkbox {
        flex: 1 1 0%; /* This allows growing and shrinking */
        min-width: 0; /* This is crucial for proper shrinking */
      }

      .fleet-checkbox__tick {
        flex: 0 0 auto; /* This prevents growing and shrinking */
        width: fit-content; /* This ensures button isn't cut off */
      }

      .fleet-checkbox__label {
        display: flex;
        white-space: nowrap;
        flex: 1 1 0%; /* This allows growing and shrinking */
        min-width: 0; /* This is crucial for proper shrinking */
      }

      &__preview-button {
        flex: 0 0 auto; /* This prevents growing and shrinking */
        width: fit-content; /* This ensures button isn't cut off */
        visibility: hidden;
      }

      &:hover {
        background: $ui-off-white;
        cursor: pointer;

        label {
          cursor: pointer;
        }

        .policy-row__preview-button {
          visibility: visible;
        }
      }

      &:first-child {
        border-radius: 4px 4px 0 0;
      }

      &:last-child {
        border-radius: 0 0 4px 4px;
        border-bottom: none;
      }
    }
  }
}
