/**
 * Device Toggle Styles - InApp variant header with Android/iOS tabs
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

// High specificity selector to override Cap UI styles
.device-toggle,
.html-editor .device-toggle {
  display: flex;
  align-items: center;
  margin-left: 2.5rem;
  padding: 0;
  background-color: $CAP_G10;
  border-radius: 0.25rem 0.25rem 0 0;

  // Device tabs container
  &__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: transparent;
  }

  // Individual tab styling - using high CSS specificity to override Cap UI styles
  &__tab {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: $CAP_G04;
    font-family: $FONT_FAMILY;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    min-height: 3.25rem;
    border-bottom: 0.125rem solid transparent;
    transition: all 0.2s ease-in-out;

    // Override any Cap UI button styles with high specificity
    &.cap-button-v2,
    &.ant-btn,
    &.cap-button-primary,
    &.cap-button-success,
    &.cap-button-flat {
      background-color: transparent;
      border: none;
      border-bottom: 0.125rem solid transparent;
      box-shadow: none;
      color: $CAP_G04;

      &:hover {
        background-color: $CAP_G09;
        color: $CAP_G01;
      }

      &:focus,
      &:active {
        background-color: transparent;
        box-shadow: none;
      }
    }

    &:hover {
      background-color: $CAP_G09;
      color: $CAP_G01;
      border-bottom-color: transparent;
    }

    &:focus,
    &:active {
      background-color: transparent;
      box-shadow: none;
      outline: none;
    }

    // Active tab styling with higher specificity
    &--active,
    &.device-toggle__tab--active {
      color: $CAP_G01;
      font-weight: 500;
      border-bottom: 0.125rem solid $CAP_G01;
      border-bottom-color: $CAP_G01;
      background-color: transparent;

      &:hover {
        color: $CAP_G01;
        background-color: $CAP_G10;
        border-bottom: 0.125rem solid $CAP_G01;
        border-bottom-color: $CAP_G01;
      }

      // Override Cap UI styles for active state with high specificity
      &.cap-button-v2,
      &.ant-btn,
      &.cap-button-primary,
      &.cap-button-success,
      &.cap-button-flat {
        background-color: transparent;
        border: none;
        border-bottom: 0.125rem solid $CAP_G01;
        color: $CAP_G01;
        box-shadow: none;

        &:hover {
          background-color: $CAP_G10;
          color: $CAP_G01;
          border-bottom: 0.125rem solid $CAP_G01;
        }

        &:focus,
        &:active {
          background-color: transparent;
          color: $CAP_G01;
          border-bottom: 0.125rem solid $CAP_G01;
        }
      }
    }

    // Icon styling within tabs
    .cap-icon,
    .anticon {
      font-size: 1.25rem;
      color: inherit;
    }

    span {
      font-size: 0.875rem;
      font-weight: inherit;
      color: inherit;
      line-height: 1.25rem;
    }
  }

  // Content sync checkbox container
  &__sync {
    display: flex;
    align-items: center;
    margin-left: 1rem;
  }

  // Checkbox styling
  &__checkbox {
    font-family: $FONT_FAMILY;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: $CAP_G01;

    .ant-checkbox {
      margin-right: 0.75rem;
    }

    .ant-checkbox-wrapper {
      align-items: center;
    }

    .ant-checkbox+span {
      font-size: 0.875rem;
      font-weight: 500;
      color: $CAP_G01;
      white-space: nowrap;
    }
  }

  // Responsive design
  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;

    &__tabs {
      width: 100%;
    }

    &__tab {
      flex: 1;
      justify-content: center;
      min-width: 0;
      padding: 0.75rem 0.5rem;

      span {
        font-size: 0.8125rem;
      }

      .cap-icon,
      .anticon {
        font-size: 1.125rem;
      }
    }

    &__sync {
      width: 100%;
      margin-left: 0;
    }
  }

  @media (max-width: 30rem) {
    &__tab {
      padding: 0.625rem 0.375rem;

      span {
        display: none; // Hide text on very small screens, show only icons
      }
    }

    &__checkbox {
      font-size: 0.8125rem;

      .ant-checkbox+span {
        font-size: 0.8125rem;
      }
    }
  }
}

// Integration with editor toolbar
.html-editor.html-editor--inapp {
  margin-top: 4%;
  .editor-toolbar {
    padding: 0 1rem 0 0; // Remove left padding to align with device toggle
    background-color: $CAP_G10;
    border-bottom: 0.0625rem solid $CAP_G07;

    &__left {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 0;

      .device-toggle {
        background-color: transparent;
        border-radius: 0;
      }
    }

    &__title {
      display: none; // Hide title in InApp variant as device toggle replaces it
    }
  }
}