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

/**
 * Windows + Chrome Notification Styles
 * Also applies to Windows + Firefox/Edge/Opera (they extend this)
 */

.notification-container.windows-chrome {
  // Inherit shared styles from macOS Chrome
  @extend .notification-container.macos-chrome;

  // Collapsed state - ensure header aligns center vertically and add brand icon border-radius
  &.collapsed .notification-header {
    align-items: center;

    .notification-brand-icon-container {
      .notification-brand-icon {
        border-radius: 5px;
      }
    }
  }

  &.expanded {
    width: 100%;
    max-width: 352px;
    background: $CAP_G09;
    border: 1px solid $CAP_G07;
    border-radius: 4px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;

    .windows-chrome-expanded-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      gap: 10px;
    }

    .windows-chrome-banner {
      width: 100%;
      line-height: 0;

      .windows-chrome-banner-image {
        width: 100%;
        height: 151px;
        object-fit: cover;
        display: block;
      }
    }

    .windows-chrome-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 12px 12px 12px;
      width: 100%;
      box-sizing: border-box;
    }

    .windows-chrome-header-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .windows-chrome-browser-icon {
      width: 32px;
      height: 32px;
      background: $CAP_G09;
      border-radius: 6px;
      padding: 6px;
    }

    .windows-chrome-browser-title {
      flex: 1;
      font-weight: 600;
      font-size: $FONT_SIZE_S;
      color: $FONT_COLOR_01;
      margin: 0;
      font-family: 'Roboto', 'Segoe UI', sans-serif;
    }

    .windows-chrome-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      .windows-chrome-menu-text {
        font-weight: 500;
        font-size: $FONT_SIZE_M;
        color: $FONT_COLOR_01;
        line-height: 1;
        user-select: none;
        font-family: 'Roboto', 'Segoe UI', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;

        .windows-chrome-menu-icon {
          height: $FONT_SIZE_M;
          width: auto;
          display: block;
        }
      }

      .windows-chrome-close-text {
        font-weight: 500;
        font-size: $FONT_SIZE_M;
        color: $FONT_COLOR_01;
        line-height: 1;
        user-select: none;
        font-family: 'Roboto', 'Segoe UI', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;

        .windows-chrome-close-icon {
          height: $FONT_SIZE_M;
          width: auto;
          display: block;
        }
      }
    }

    .windows-chrome-content-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
    }

    .windows-chrome-brand-icon {
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 4px;
      border: 1px solid $CAP_G07;
      background: $CAP_WHITE;
      flex-shrink: 0;

      .notification-brand-icon {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .windows-chrome-text-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      width: 100%;
      font-family: 'Roboto', 'Segoe UI', sans-serif;
    }

    .windows-chrome-title {
      font-weight: 600;
      font-size: $FONT_SIZE_S;
      color: $FONT_COLOR_01;
      margin: 0;
      line-height: 14px;
      word-break: break-word;
      font-family: 'Roboto', 'Segoe UI', sans-serif;
    }

    .windows-chrome-url {
      font-weight: 500;
      font-size: $FONT_SIZE_VS;
      color: $FONT_COLOR_01;
      margin: 0;
      line-height: 12px;
      word-break: break-word;
      font-family: 'Roboto', 'Segoe UI', sans-serif;
    }

    .windows-chrome-body-text {
      font-weight: 400;
      font-size: $FONT_SIZE_VS;
      color: $FONT_COLOR_01;
      margin: 0;
      line-height: 12px;
      word-break: break-word;
      font-family: 'Roboto', 'Segoe UI', sans-serif;
    }

    .windows-chrome-cta-container {
      display: flex;
      gap: 8px;
      width: 100%;
      margin-top: 4px;
    }

    .windows-chrome-cta-button {
      height: 32px;
      padding: 6px 24px;
      border-radius: 4px;
      border: 1px solid $CAP_G07;
      background: $CAP_WHITE;
      cursor: pointer;
      box-sizing: border-box;
      width: 148px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Roboto', 'Segoe UI', sans-serif;

      &.windows-chrome-cta-button-single {
        width: 100%;
      }

      .windows-chrome-cta-button-text {
        font-weight: $FONT_WEIGHT_MEDIUM;
        font-size: $FONT_SIZE_S;
        color: $FONT_COLOR_01;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1;
      }
    }
  }
}

